| </td> <td>Defines the browser page title.</td> </tr> <tr> <td><body></td> <td>Contains visible page content.</td> </tr> </table> <hr> <h2>4. HTML Tags</h2> <p>HTML tags define elements on a web page.</p> <pre><code><h1>Login Page</h1> <p>Welcome to the application.</p> <button>Submit</button></code></pre> <p>Most HTML elements have an opening tag and a closing tag.</p> <pre><code><p>Hello World</p></code></pre> <ul> <li><strong>Opening tag:</strong> <p></li> <li><strong>Content:</strong> Hello World</li> <li><strong>Closing tag:</strong> </p></li> </ul> <hr> <h2>5. HTML Elements</h2> <p>An HTML element generally consists of an opening tag, content, and closing tag.</p> <pre><code><button>Login</button></code></pre> <p>Here, the complete button structure is an HTML element.</p> <h3>Common HTML Elements for Testers</h3> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Element</th> <th>Purpose</th> </tr> <tr> <td><h1> to <h6></td> <td>Headings</td> </tr> <tr> <td><p></td> <td>Paragraph</td> </tr> <tr> <td><a></td> <td>Hyperlink</td> </tr> <tr> <td><button></td> <td>Button</td> </tr> <tr> <td><input></td> <td>Input field</td> </tr> <tr> <td><textarea></td> <td>Multi-line input</td> </tr> <tr> <td><select></td> <td>Dropdown</td> </tr> <tr> <td><option></td> <td>Dropdown option</td> </tr> <tr> <td><form></td> <td>Form container</td> </tr> <tr> <td><table></td> <td>Table</td> </tr> <tr> <td><tr></td> <td>Table row</td> </tr> <tr> <td><td></td> <td>Table data cell</td> </tr> <tr> <td><div></td> <td>Generic block container</td> </tr> <tr> <td><span></td> <td>Generic inline container</td> </tr> </table> <hr> <h2>6. HTML Attributes</h2> <p>Attributes provide additional information about HTML elements.</p> <pre><code><input id="username" name="user" type="text"></code></pre> <p>The above element contains multiple attributes.</p> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Attribute</th> <th>Value</th> <th>Purpose</th> </tr> <tr> <td>id</td> <td>username</td> <td>Uniquely identifies an element.</td> </tr> <tr> <td>name</td> <td>user</td> <td>Provides a name for the element.</td> </tr> <tr> <td>type</td> <td>text</td> <td>Defines the input type.</td> </tr> </table> <p>Attributes are extremely important for Selenium because they are commonly used to create element locators.</p> <hr> <h2>7. The id Attribute</h2> <p>The <strong>id</strong> attribute identifies an element.</p> <pre><code><input id="username" type="text"> <button id="loginButton">Login</button></code></pre> <p>In Selenium, an ID is often a convenient locator when it is unique and stable.</p> <pre><code>driver.findElement(By.id("username")).sendKeys("admin");</code></pre> <h3>Tester Tip</h3> <p>Always check whether the ID is stable and unique before using it as the primary locator.</p> <hr> <h2>8. The class Attribute</h2> <p>The <strong>class</strong> attribute is commonly used to assign one or more CSS classes to an element.</p> <pre><code><button class="btn btn-primary">Login</button></code></pre> <p>Classes are commonly used for styling, but testers can also use them when creating CSS selectors or other locators.</p> <pre><code>driver.findElement(By.cssSelector(".btn-primary"));</code></pre> <hr> <h2>9. The name Attribute</h2> <p>The <strong>name</strong> attribute identifies an element by name.</p> <pre><code><input type="text" name="username"></code></pre> <p>Selenium can locate this element using:</p> <pre><code>driver.findElement(By.name("username"));</code></pre> <hr> <h2>10. The type Attribute</h2> <p>The <strong>type</strong> attribute specifies the type of an input element.</p> <pre><code><input type="text"> <input type="password"> <input type="email"> <input type="checkbox"> <input type="radio"> <input type="submit"></code></pre> <h3>Common Input Types</h3> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Type</th> <th>Usage</th> </tr> <tr> <td>text</td> <td>Text input</td> </tr> <tr> <td>password</td> <td>Password input</td> </tr> <tr> <td>email</td> <td>Email input</td> </tr> <tr> <td>number</td> <td>Numeric input</td> </tr> <tr> <td>checkbox</td> <td>Multiple selection</td> </tr> <tr> <td>radio</td> <td>Single selection</td> </tr> <tr> <td>submit</td> <td>Form submission</td> </tr> <tr> <td>file</td> <td>File selection</td> </tr> </table> <hr> <h2>11. Text Content in HTML</h2> <p>Visible text is an important part of web testing.</p> <pre><code><button>Login</button> <h1>Dashboard</h1></code></pre> <p>Selenium can retrieve visible text from elements.</p> <pre><code>String buttonText = driver.findElement(By.tagName("button")).getText(); System.out.println(buttonText);</code></pre> <hr> <h2>12. HTML Headings</h2> <p>HTML provides six heading levels.</p> <pre><code><h1>Main Heading</h1> <h2>Section Heading</h2> <h3>Subsection Heading</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6></code></pre> <p>Testers may validate whether required headings are present and whether their text is correct.</p> <hr> <h2>13. Paragraphs</h2> <p>The <p> tag represents a paragraph.</p> <pre><code><p>Welcome to the application.</p></code></pre> <p>Example Selenium validation:</p> <pre><code>String text = driver.findElement(By.tagName("p")).getText(); System.out.println(text);</code></pre> <hr> <h2>14. Links and Anchor Tags</h2> <p>The <a> element is used to create hyperlinks.</p> <pre><code><a href="https://example.com">Visit Website</a></code></pre> <p>The <strong>href</strong> attribute contains the destination URL.</p> <h3>Selenium Example</h3> <pre><code>driver.findElement(By.linkText("Visit Website")).click();</code></pre> <h3>Partial Link Text</h3> <pre><code>driver.findElement(By.partialLinkText("Visit")).click();</code></pre> <hr> <h2>15. Images</h2> <p>The <img> element displays an image.</p> <pre><code><img src="logo.png" alt="Company Logo"></code></pre> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Attribute</th> <th>Purpose</th> </tr> <tr> <td>src</td> <td>Specifies image location.</td> </tr> <tr> <td>alt</td> <td>Alternative text for the image.</td> </tr> <tr> <td>width</td> <td>Image width.</td> </tr> <tr> <td>height</td> <td>Image height.</td> </tr> </table> <p>Testers can validate whether images are displayed correctly and whether required attributes are present.</p> <hr> <h2>16. Div Element</h2> <p>The <div> element is a generic block-level container and is widely used in modern web applications.</p> <pre><code><div class="login-container"> <h2>Login</h2> <input id="username"> <button id="login">Login</button> </div></code></pre> <p>Testers frequently encounter nested div structures while inspecting web applications.</p> <hr> <h2>17. Span Element</h2> <p>The <span> element is an inline container.</p> <pre><code><span class="error-message">Invalid username</span></code></pre> <p>Testers can use span elements to validate error messages, labels, status messages, and dynamic text.</p> <hr> <h2>18. HTML Forms</h2> <p>Forms are one of the most important HTML structures for testers because login, registration, checkout, search, contact, and payment workflows commonly use forms.</p> <pre><code><form> <label>Username</label> <input id="username" type="text">
<label>Password</label>
<input id="password" type="password">
<button type="submit">Login</button>
</form></code></pre>
<h3>Testing Form Fields</h3> <ul> <li>Verify field visibility.</li> <li>Enter valid data.</li> <li>Enter invalid data.</li> <li>Check mandatory fields.</li> <li>Validate error messages.</li> <li>Check field boundaries.</li> <li>Test special characters.</li> <li>Verify form submission.</li> <li>Verify reset functionality.</li> </ul> <hr> <h2>19. Label Element</h2> <p>The <label> element provides a text label for form controls.</p> <pre><code><label for="username">Username</label> <input id="username" type="text"></code></pre> <p>The <strong>for</strong> attribute connects the label with the corresponding input element.</p> <hr> <h2>20. Input Elements</h2> <p>The <input> element is one of the most frequently automated HTML elements.</p> <pre><code><input type="text" id="username"> <input type="password" id="password"> <input type="email" id="email"></code></pre> <h3>Selenium Example</h3> <pre><code>driver.findElement(By.id("username")).sendKeys("admin"); driver.findElement(By.id("password")).sendKeys("password123");</code></pre> <hr> <h2>21. Buttons</h2> <p>Buttons are used to trigger actions such as login, submit, search, save, delete, and navigation.</p> <pre><code><button id="loginButton">Login</button></code></pre> <h3>Selenium Example</h3> <pre><code>driver.findElement(By.id("loginButton")).click();</code></pre> <hr> <h2>22. Checkboxes</h2> <p>Checkboxes allow users to select multiple options.</p> <pre><code><input type="checkbox" id="terms"> <label for="terms">Accept Terms</label></code></pre> <h3>Selenium Example</h3> <pre><code>WebElement checkbox = driver.findElement(By.id("terms"));
if (!checkbox.isSelected()) {
checkbox.click();
}</code></pre>
<hr> <h2>23. Radio Buttons</h2> <p>Radio buttons are generally used when the user must select one option from a group.</p> <pre><code><input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female</code></pre> <h3>Testing Radio Buttons</h3> <ul> <li>Verify the radio button is displayed.</li> <li>Verify whether it is enabled.</li> <li>Select the required option.</li> <li>Verify that the selected state is correct.</li> <li>Verify whether only the expected option can be selected.</li> </ul> <hr> <h2>24. Dropdowns</h2> <p>HTML dropdowns are commonly created using the <select> and <option> elements.</p> <pre><code><select id="country"> <option value="india">India</option> <option value="usa">USA</option> <option value="uk">UK</option> </select></code></pre> <h3>Selenium Example</h3> <pre><code>Select country = new Select(driver.findElement(By.id("country"))); country.selectByVisibleText("India");</code></pre> <hr> <h2>25. Textarea</h2> <p>The <textarea> element is used for multi-line text input.</p> <pre><code><textarea id="message" rows="5" cols="30"></textarea></code></pre> <h3>Selenium Example</h3> <pre><code>driver.findElement(By.id("message")) .sendKeys("This is a test message.");</code></pre> <hr> <h2>26. HTML Tables</h2> <p>Tables are used to display structured data.</p> <pre><code><table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Rahul</td> <td>25</td> </tr> </table></code></pre> <h3>Important Table Tags</h3> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Tag</th> <th>Purpose</th> </tr> <tr> <td><table></td> <td>Creates table.</td> </tr> <tr> <td><tr></td> <td>Creates row.</td> </tr> <tr> <td><th></td> <td>Creates header cell.</td> </tr> <tr> <td><td></td> <td>Creates data cell.</td> </tr> </table> <hr> <h2>27. HTML Lists</h2> <p>HTML supports ordered and unordered lists.</p> <h3>Unordered List</h3> <pre><code><ul> <li>Login</li> <li>Registration</li> <li>Checkout</li> </ul></code></pre> <h3>Ordered List</h3> <pre><code><ol> <li>Open Website</li> <li>Login</li> <li>Verify Dashboard</li> </ol></code></pre> <hr> <h2>28. Parent and Child Elements</h2> <p>HTML elements can contain other elements. The outer element is called the parent and the inner element is called the child.</p> <pre><code><div class="login"> <input id="username"> <button id="login">Login</button> </div></code></pre> <p>Here, the div is the parent and the input and button are child elements.</p> <p>Understanding parent-child relationships is essential for writing XPath expressions.</p> <hr> <h2>29. Sibling Elements</h2> <p>Elements that share the same parent are called sibling elements.</p> <pre><code><div> <label>Username</label> <input id="username"> <button>Login</button> </div></code></pre> <p>The label, input, and button are sibling elements.</p> <hr> <h2>30. HTML DOM</h2> <p>DOM stands for <strong>Document Object Model</strong>. The browser converts an HTML document into a tree-like structure called the DOM.</p> <pre><code>HTML | +-- HEAD | +-- BODY | +-- DIV | +-- INPUT | +-- BUTTON</code></pre> <p>Selenium interacts with elements exposed through the browser's DOM.</p> <hr> <h2>31. Understanding DOM Hierarchy</h2> <p>Consider the following HTML:</p> <pre><code><html> <body> <div id="login"> <input id="username"> <input id="password"> <button>Login</button> </div> </body> </html></code></pre> <p>The hierarchy can be represented as:</p> <pre><code>html | body | div#login | +-- input#username | +-- input#password | +-- button</code></pre> <p>This hierarchy helps testers understand XPath relationships.</p> <hr> <h2>32. HTML Comments</h2> <p>Comments are ignored by the browser and are mainly used for developer documentation.</p> <pre><code><!-- Login section --> <div class="login"> ... </div></code></pre> <p>Comments generally do not affect Selenium execution, but they may help testers understand page source while debugging.</p> <hr> <h2>33. Semantic HTML</h2> <p>Semantic HTML uses meaningful tags to describe the purpose of content.</p> <pre><code><header> <nav>...</nav> </header>
<main>
<section>
...
</section>
</main>
<footer>
...
</footer></code></pre>
<h3>Common Semantic Elements</h3> <ul> <li><header></li> <li><nav></li> <li><main></li> <li><section></li> <li><article></li> <li><aside></li> <li><footer></li> </ul> <hr> <h2>34. Data Attributes</h2> <p>Modern web applications frequently use custom data attributes such as <strong>data-testid</strong> for testing.</p> <pre><code><button data-testid="login-button">Login</button></code></pre> <p>A tester can create a CSS selector using this attribute:</p> <pre><code>driver.findElement(By.cssSelector("[data-testid='login-button']")).click();</code></pre> <p>Dedicated test attributes can provide stable automation hooks when they are intentionally maintained by the development team.</p> <hr> <h2>35. HTML Attributes Commonly Used in Selenium</h2> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Attribute</th> <th>Example</th> <th>Typical Testing Use</th> </tr> <tr> <td>id</td> <td>id="login"</td> <td>Element identification</td> </tr> <tr> <td>name</td> <td>name="username"</td> <td>Element identification</td> </tr> <tr> <td>class</td> <td>class="btn-primary"</td> <td>CSS-based identification</td> </tr> <tr> <td>type</td> <td>type="text"</td> <td>Identify control type</td> </tr> <tr> <td>value</td> <td>value="India"</td> <td>Validate input/control value</td> </tr> <tr> <td>href</td> <td>href="/login"</td> <td>Validate links</td> </tr> <tr> <td>title</td> <td>title="Login"</td> <td>Tooltip/element identification</td> </tr> <tr> <td>placeholder</td> <td>placeholder="Enter email"</td> <td>Input identification/validation</td> </tr> <tr> <td>data-testid</td> <td>data-testid="login"</td> <td>Test automation hook</td> </tr> </table> <hr> <h2>36. Inspecting HTML Using Browser Developer Tools</h2> <p>Testers can inspect HTML elements using browser Developer Tools.</p> <h3>General Steps</h3> <ol> <li>Open the web application.</li> <li>Right-click the element.</li> <li>Select <strong>Inspect</strong>.</li> <li>Developer Tools will open.</li> <li>Review the selected HTML element.</li> <li>Identify attributes such as id, class, name, and data attributes.</li> <li>Use the information to create a Selenium locator.</li> </ol> <hr> <h2>37. Example of Inspecting a Login Element</h2> <pre><code><input type="text" id="username" name="username" class="form-control" placeholder="Enter Username"></code></pre> <p>Possible Selenium locators include:</p> <pre><code>By.id("username")
By.name("username")
By.className("form-control")
By.cssSelector("#username")
By.xpath("//input[@id='username']")</code></pre>
<hr> <h2>38. HTML and Selenium Locators</h2> <p>Understanding HTML is the foundation for understanding Selenium locators. The Selenium course curriculum at JustAcademy specifically includes locating elements using ID, XPath, and CSS selectors along with working with WebElements.</p> <h3>Common Selenium Locators</h3> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Locator</th> <th>Example</th> </tr> <tr> <td>id</td> <td>By.id("username")</td> </tr> <tr> <td>name</td> <td>By.name("username")</td> </tr> <tr> <td>className</td> <td>By.className("form-control")</td> </tr> <tr> <td>tagName</td> <td>By.tagName("input")</td> </tr> <tr> <td>linkText</td> <td>By.linkText("Login")</td> </tr> <tr> <td>partialLinkText</td> <td>By.partialLinkText("Log")</td> </tr> <tr> <td>cssSelector</td> <td>By.cssSelector("#username")</td> </tr> <tr> <td>XPath</td> <td>By.xpath("//input[@id='username']")</td> </tr> </table> <hr> <h2>39. HTML and XPath</h2> <p>XPath is used to navigate through elements in the DOM.</p> <h3>Basic XPath</h3> <pre><code>//input[@id='username']</code></pre> <h3>XPath Using Class</h3> <pre><code>//button[@class='login-button']</code></pre> <h3>XPath Using Text</h3> <pre><code>//button[text()='Login']</code></pre> <h3>XPath Using Multiple Attributes</h3> <pre><code>//input[@type='text' and @id='username']</code></pre> <hr> <h2>40. HTML and CSS Selectors</h2> <p>CSS selectors provide another powerful way to locate elements.</p> <h3>By ID</h3> <pre><code>#username</code></pre> <h3>By Class</h3> <pre><code>.login-button</code></pre> <h3>By Attribute</h3> <pre><code>input[name='username']</code></pre> <h3>Combined Selector</h3> <pre><code>div.login-container input#username</code></pre> <hr> <h2>41. WebElement Concept</h2> <p>A WebElement represents an HTML element on a web page that Selenium can interact with.</p> <pre><code>WebElement username = driver.findElement(By.id("username"));
username.sendKeys("admin");</code></pre>
<h3>Common WebElement Operations</h3> <ul> <li>click()</li> <li>sendKeys()</li> <li>clear()</li> <li>getText()</li> <li>getAttribute()</li> <li>isDisplayed()</li> <li>isEnabled()</li> <li>isSelected()</li> </ul> <hr> <h2>42. getAttribute()</h2> <p>The getAttribute() method can retrieve the value of an HTML attribute.</p> <pre><code>String placeholder = driver.findElement(By.id("username")) .getAttribute("placeholder");
System.out.println(placeholder);</code></pre>
<p>This can be useful when validating HTML attributes during automation testing.</p> <hr> <h2>43. isDisplayed()</h2> <p>The isDisplayed() method checks whether an element is visible.</p> <pre><code>WebElement button = driver.findElement(By.id("login"));
if (button.isDisplayed()) {
System.out.println("Login button is visible");
}</code></pre>
<hr> <h2>44. isEnabled()</h2> <p>The isEnabled() method verifies whether an element is enabled.</p> <pre><code>WebElement submit = driver.findElement(By.id("submit"));
if (submit.isEnabled()) {
System.out.println("Submit button is enabled");
}</code></pre>
<hr> <h2>45. isSelected()</h2> <p>The isSelected() method is commonly used for checkboxes and radio buttons.</p> <pre><code>WebElement terms = driver.findElement(By.id("terms"));
System.out.println(terms.isSelected());</code></pre>
<hr> <h2>46. HTML Validation from a Tester Perspective</h2> <p>Testers can validate important properties of web elements.</p> <ul> <li>Element exists.</li> <li>Element is visible.</li> <li>Element is enabled.</li> <li>Element has correct text.</li> <li>Element has correct attributes.</li> <li>Links point to expected destinations.</li> <li>Forms accept valid input.</li> <li>Forms reject invalid input.</li> <li>Required fields are enforced.</li> <li>Buttons trigger expected actions.</li> </ul> <hr> <h2>47. Example: Testing a Login Page</h2> <pre><code><form id="loginForm"> <input id="username" type="text" placeholder="Username">
<input
id="password"
type="password"
placeholder="Password">
<button id="loginButton" type="submit">
Login
</button>
</form></code></pre>
<h3>Selenium Test</h3> <pre><code>driver.findElement(By.id("username")) .sendKeys("admin");
driver.findElement(By.id("password"))
.sendKeys("password123");
driver.findElement(By.id("loginButton"))
.click();</code></pre>
<hr> <h2>48. Example: Testing Required Fields</h2> <pre><code><input id="email" type="email" required></code></pre> <p>The tester should verify:</p> <ul> <li>Form does not submit with an empty email.</li> <li>Valid email is accepted.</li> <li>Invalid email is rejected.</li> <li>Validation message is displayed where expected.</li> </ul> <hr> <h2>49. HTML5 Input Validation</h2> <p>HTML5 provides built-in validation attributes.</p> <pre><code><input type="email" required> <input type="number" min="1" max="100"> <input type="text" minlength="5" maxlength="20"></code></pre> <h3>Important Validation Attributes</h3> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Attribute</th> <th>Purpose</th> </tr> <tr> <td>required</td> <td>Field must contain a value.</td> </tr> <tr> <td>min</td> <td>Minimum numeric value.</td> </tr> <tr> <td>max</td> <td>Maximum numeric value.</td> </tr> <tr> <td>minlength</td> <td>Minimum text length.</td> </tr> <tr> <td>maxlength</td> <td>Maximum text length.</td> </tr> <tr> <td>pattern</td> <td>Pattern-based validation.</td> </tr> <tr> <td>readonly</td> <td>Prevents normal editing.</td> </tr> <tr> <td>disabled</td> <td>Disables the control.</td> </tr> </table> <hr> <h2>50. Hidden Elements</h2> <p>Some HTML elements may exist in the DOM but not be visible to the user.</p> <pre><code><input type="hidden" id="userId" value="101"></code></pre> <p>Testers should understand the difference between an element existing in the DOM and an element being visible and interactable.</p> <hr> <h2>51. Disabled Elements</h2> <pre><code><button id="submit" disabled>Submit</button></code></pre> <p>A tester should verify whether controls are enabled or disabled according to the application's business rules.</p> <hr> <h2>52. Readonly Elements</h2> <pre><code><input id="username" value="admin" readonly></code></pre> <p>A readonly element can display a value while preventing normal user editing.</p> <hr> <h2>53. Placeholder Attribute</h2> <p>The placeholder provides a hint to the user.</p> <pre><code><input id="email" placeholder="Enter your email"></code></pre> <p>Testers can validate the placeholder using getAttribute().</p> <pre><code>String placeholder = driver.findElement(By.id("email")) .getAttribute("placeholder");</code></pre> <hr> <h2>54. HTML Forms Testing Checklist</h2> <ul> <li>Verify all fields are displayed.</li> <li>Verify field labels.</li> <li>Verify placeholders.</li> <li>Verify mandatory fields.</li> <li>Verify field types.</li> <li>Verify valid input.</li> <li>Verify invalid input.</li> <li>Verify boundary values.</li> <li>Verify special characters.</li> <li>Verify submit button.</li> <li>Verify reset button.</li> <li>Verify error messages.</li> <li>Verify successful submission.</li> </ul> <hr> <h2>55. HTML Page Source vs DOM</h2> <p>Testers should understand that the original page source and the current DOM can differ after JavaScript modifies the page.</p> <p>Modern web applications frequently create, remove, or update elements dynamically. Therefore, inspecting the current DOM is often important when debugging Selenium locators.</p> <hr> <h2>56. Static and Dynamic Elements</h2> <p>A static element generally remains structurally consistent, while a dynamic element may have changing attributes, IDs, text, or position.</p> <h3>Static Example</h3> <pre><code><button id="loginButton">Login</button></code></pre> <h3>Dynamic Example</h3> <pre><code><button id="button_98452">Login</button></code></pre> <p>If the ID changes on every execution, a tester may need another stable attribute or a carefully designed XPath/CSS selector.</p> <hr> <h2>57. Common HTML Challenges for Selenium Testers</h2> <ul> <li>Dynamic IDs.</li> <li>Nested elements.</li> <li>Changing classes.</li> <li>Hidden elements.</li> <li>Dynamic content.</li> <li>Multiple similar elements.</li> <li>Frames and iframes.</li> <li>Multiple browser windows.</li> <li>Custom dropdowns.</li> <li>JavaScript-generated elements.</li> </ul> <hr> <h2>58. HTML and Dynamic Web Applications</h2> <p>Modern applications may update HTML without reloading the complete page.</p> <pre><code>User Action ↓ JavaScript Event ↓ Server/API Request ↓ Response ↓ DOM Updated ↓ New HTML Element Appears ↓ Selenium Interacts With Element</code></pre> <p>This is why testers need to understand both HTML structure and synchronization techniques.</p> <hr> <h2>59. HTML and Waits</h2> <p>JustAcademy's Selenium curriculum includes implicit, explicit, and fluent waits for synchronization and dynamic elements.</p> <p>For example, an element may initially exist in the page structure but become clickable only after JavaScript completes an operation.</p> <pre><code>WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement login =
wait.until(ExpectedConditions.elementToBeClickable(
By.id("loginButton")
));
login.click();</code></pre>
<hr> <h2>60. HTML and Frames</h2> <p>An iframe creates a separate browsing context inside a page.</p> <pre><code><iframe src="payment.html" id="paymentFrame"> </iframe></code></pre> <p>Selenium must switch to the frame before interacting with elements inside it.</p> <pre><code>driver.switchTo().frame("paymentFrame");
driver.findElement(By.id("cardNumber"))
.sendKeys("4111111111111111");
driver.switchTo().defaultContent();</code></pre>
<hr> <h2>61. HTML and Multiple Windows</h2> <p>Modern applications can open links or pages in new browser tabs or windows.</p> <pre><code><a href="help.html" target="_blank">Help</a></code></pre> <p>Testers need to understand the HTML target attribute and Selenium window-handling concepts.</p> <hr> <h2>62. HTML and Accessibility</h2> <p>Testers should also understand basic accessibility-related HTML attributes.</p> <pre><code><button aria-label="Close Dialog">X</button></code></pre> <p>Attributes such as <strong>aria-label</strong>, appropriate labels, semantic elements, and accessible names can be important when validating usability and accessibility.</p> <hr> <h2>63. HTML Attributes Useful for Accessibility Testing</h2> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Attribute</th> <th>Example</th> <th>Purpose</th> </tr> <tr> <td>aria-label</td> <td>aria-label="Search"</td> <td>Provides an accessible name.</td> </tr> <tr> <td>aria-describedby</td> <td>aria-describedby="help"</td> <td>Associates supporting information.</td> </tr> <tr> <td>role</td> <td>role="button"</td> <td>Defines an accessibility role.</td> </tr> <tr> <td>alt</td> <td>alt="Company Logo"</td> <td>Alternative image text.</td> </tr> </table> <hr> <h2>64. Common HTML Mistakes Testers Should Notice</h2> <ul> <li>Missing labels.</li> <li>Missing alt attributes for important images.</li> <li>Duplicate IDs.</li> <li>Incorrect form controls.</li> <li>Broken links.</li> <li>Missing required attributes.</li> <li>Incorrect input types.</li> <li>Unexpected disabled fields.</li> <li>Incorrect button behavior.</li> <li>Invalid or confusing DOM hierarchy.</li> </ul> <hr> <h2>65. HTML Validation Using Selenium</h2> <p>Selenium can be used to validate user-visible behavior and element properties.</p> <pre><code>WebElement email = driver.findElement(By.id("email"));
System.out.println(email.isDisplayed());
System.out.println(email.isEnabled());
System.out.println(email.getAttribute("type"));
System.out.println(email.getAttribute("placeholder"));</code></pre>
<hr> <h2>66. Practical Project: Automate a Login Page</h2> <h3>HTML</h3> <pre><code><form> <label for="username">Username</label> <input id="username" type="text">
<label for="password">Password</label>
<input id="password" type="password">
<button id="loginButton">Login</button>
</form></code></pre>
<h3>Test Scenarios</h3> <ol> <li>Verify username field.</li> <li>Verify password field.</li> <li>Verify login button.</li> <li>Enter valid credentials.</li> <li>Enter invalid credentials.</li> <li>Leave username blank.</li> <li>Leave password blank.</li> <li>Verify validation messages.</li> <li>Verify successful login.</li> <li>Verify unsuccessful login.</li> </ol> <hr> <h2>67. Practical Project: Registration Form</h2> <pre><code><form id="registration"> <input id="name" type="text"> <input id="email" type="email"> <input id="password" type="password"> <input id="confirmPassword" type="password">
<input id="terms" type="checkbox">
<button id="register">Register</button>
</form></code></pre>
<h3>Test Scenarios</h3> <ul> <li>Valid registration.</li> <li>Invalid email.</li> <li>Empty name.</li> <li>Weak password.</li> <li>Password mismatch.</li> <li>Terms checkbox validation.</li> <li>Duplicate email.</li> <li>Successful registration.</li> </ul> <hr> <h2>68. Practical Project: E-Commerce Page</h2> <p>An e-commerce page may contain products, buttons, prices, images, dropdowns, and cart controls.</p> <pre><code><div class="product"> <img src="phone.jpg" alt="Phone"> <h2>Smartphone</h2> <p class="price">₹25,000</p> <button class="add-cart">Add to Cart</button> </div></code></pre> <h3>Tester Responsibilities</h3> <ul> <li>Verify product name.</li> <li>Verify product image.</li> <li>Verify price.</li> <li>Verify Add to Cart button.</li> <li>Verify cart update.</li> <li>Verify quantity.</li> <li>Verify checkout flow.</li> </ul> <hr> <h2>69. HTML Knowledge Required Before Learning Selenium</h2> <table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Topic</th> <th>Importance for Testers</th> </tr> <tr> <td>HTML Tags</td> <td>Understand page structure.</td> </tr> <tr> <td>Attributes</td> <td>Create locators.</td> </tr> <tr> <td>Forms</td> <td>Automate user input.</td> </tr> <tr> <td>DOM</td> <td>Understand element hierarchy.</td> </tr> <tr> <td>Parent/Child</td> <td>Create relative locators.</td> </tr> <tr> <td>IDs and Classes</td> <td>Identify elements.</td> </tr> <tr> <td>XPath</td> <td>Locate complex elements.</td> </tr> <tr> <td>CSS Selectors</td> <td>Locate elements efficiently.</td> </tr> <tr> <td>Dynamic Elements</td> <td>Handle modern web applications.</td> </tr> </table> <hr> <h2>70. HTML Testing Best Practices</h2> <ul> <li>Understand the DOM before creating complex locators.</li> <li>Prefer stable and unique attributes.</li> <li>Avoid unnecessarily long XPath expressions.</li> <li>Do not depend only on CSS classes used for visual styling.</li> <li>Use dedicated test attributes when available.</li> <li>Validate both positive and negative scenarios.</li> <li>Inspect dynamic elements carefully.</li> <li>Use explicit waits when synchronization is required.</li> <li>Keep Selenium locators readable.</li> <li>Review locators whenever the UI changes.</li> </ul> <hr> <h2>71. Common Mistakes Made by Beginners</h2> <ol> <li>Using absolute XPath everywhere.</li> <li>Using unstable dynamic IDs.</li> <li>Ignoring HTML hierarchy.</li> <li>Not checking whether a locator is unique.</li> <li>Using class names without understanding duplicates.</li> <li>Trying to interact with hidden elements directly.</li> <li>Ignoring frames.</li> <li>Ignoring dynamic content.</li> <li>Using hard-coded waits unnecessarily.</li> <li>Not inspecting the current DOM while debugging.</li> </ol> <hr> <h2>72. HTML to Selenium Learning Flow</h2> <pre><code>HTML Basics ↓ HTML Elements ↓ HTML Attributes ↓ DOM Structure ↓ Browser Developer Tools ↓ Locators ↓ XPath ↓ CSS Selectors ↓ WebElement ↓ Selenium WebDriver ↓ Automation Scripts ↓ TestNG ↓ Automation Framework</code></pre> <hr> <h2>73. Interview Questions on HTML for Testers</h2> <h3>Q1. What is HTML?</h3> <p>HTML is a markup language used to structure content on web pages.</p> <h3>Q2. Why should a Selenium tester learn HTML?</h3> <p>HTML knowledge helps testers understand the DOM, identify elements, and create Selenium locators.</p> <h3>Q3. What is an HTML attribute?</h3> <p>An attribute provides additional information about an HTML element, such as id, name, class, type, or href.</p> <h3>Q4. What is the difference between id and class?</h3> <p>An ID is intended to identify a specific element, while a class can be shared by multiple elements.</p> <h3>Q5. What is the DOM?</h3> <p>The DOM is a tree representation of an HTML document that allows browsers and scripts to work with page elements.</p> <h3>Q6. What is the difference between parent and child elements?</h3> <p>A parent contains another element, while the contained element is called the child.</p> <h3>Q7. What is XPath?</h3> <p>XPath is an expression language used to navigate and identify elements in the DOM.</p> <h3>Q8. What is a CSS selector?</h3> <p>A CSS selector is a pattern used to identify HTML elements based on IDs, classes, attributes, hierarchy, and other selectors.</p> <h3>Q9. What is the difference between <div> and <span>?</h3> <p>A div is generally a block-level container, while span is generally an inline container.</p> <h3>Q10. What is the purpose of the href attribute?</h3> <p>The href attribute specifies the destination of a hyperlink.</p> <hr> <h2>74. Advanced Interview Questions</h2> <h3>Q1. How do you handle dynamic HTML elements?</h3> <p>Use stable attributes, relative XPath or CSS selectors, and appropriate synchronization strategies.</p> <h3>Q2. Why should testers avoid absolute XPath when possible?</h3> <p>Absolute XPath depends heavily on the complete DOM hierarchy and can break when page structure changes.</p> <h3>Q3. What is a data-testid?</h3> <p>It is a custom data attribute often used to provide a dedicated hook for automated testing.</p> <h3>Q4. How can you retrieve an HTML attribute using Selenium?</h3> <pre><code>element.getAttribute("attributeName");</code></pre> <h3>Q5. How do you verify whether an element is visible?</h3> <pre><code>element.isDisplayed();</code></pre> <h3>Q6. How do you check whether a button is enabled?</h3> <pre><code>element.isEnabled();</code></pre> <hr> <h2>75. HTML Basics for Testers - Final Checklist</h2> <ul> <li>Understand HTML document structure.</li> <li>Understand tags and elements.</li> <li>Understand attributes.</li> <li>Understand IDs and classes.</li> <li>Understand input elements.</li> <li>Understand buttons.</li> <li>Understand links.</li> <li>Understand forms.</li> <li>Understand dropdowns.</li> <li>Understand checkboxes and radio buttons.</li> <li>Understand tables.</li> <li>Understand parent-child relationships.</li> <li>Understand DOM.</li> <li>Understand Developer Tools.</li> <li>Understand XPath basics.</li> <li>Understand CSS selector basics.</li> <li>Understand dynamic elements.</li> <li>Understand WebElements.</li> <li>Understand HTML validation.</li> <li>Connect HTML knowledge with Selenium automation.</li> </ul> <hr> <h2>76. HTML Basics for Testers - Complete Practical Flow</h2> <pre><code>Learn HTML ↓ Understand Tags ↓ Understand Attributes ↓ Inspect Web Page ↓ Understand DOM ↓ Identify Web Elements ↓ Create Locators ↓ Use XPath/CSS ↓ Find WebElement ↓ Perform Actions ↓ Validate Results ↓ Automate Test Cases ↓ Build Selenium Framework</code></pre> <hr> <h2>77. Conclusion</h2> <p>HTML is one of the fundamental technologies that every web application tester should understand. For Selenium automation, HTML knowledge is especially valuable because almost every automation activity begins with identifying and interacting with elements in the browser DOM.</p> <p>By learning HTML tags, attributes, forms, inputs, buttons, links, DOM hierarchy, parent-child relationships, XPath, CSS selectors, and browser Developer Tools, testers can create more reliable automation scripts and debug element-related failures more effectively.</p> <p>These fundamentals provide a strong foundation for progressing toward Selenium WebDriver, TestNG, Page Object Model, data-driven testing, automation frameworks, cross-browser testing, CI/CD, and advanced automation practices. JustAcademy's Selenium curriculum similarly progresses from software testing fundamentals and programming basics into Selenium WebDriver, locators, advanced browser interactions, waits, TestNG, frameworks, reporting, Grid, CI/CD, and practical automation projects.</p> <hr> <h2>78. Selenium Learning Resources</h2> <p><a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">JustAcademy Selenium Automation Testing Course</a></p> <p><a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Selenium Course Demo</a></p> <hr> <h2>79. Recommended Learning Path for Testers</h2> <ol> <li>Software Testing Fundamentals</li> <li>HTML Basics for Testers</li> <li>CSS Basics for Testers</li> <li>Java Programming Basics</li> <li>Object-Oriented Programming</li> <li>Selenium WebDriver</li> <li>Selenium Locators</li> <li>XPath and CSS Selectors</li> <li>WebElement Interactions</li> <li>Waits and Synchronization</li> <li>Alerts, Frames and Windows</li> <li>TestNG</li> <li>Page Object Model</li> <li>Data-Driven Testing</li> <li>Automation Framework Development</li> <li>Reporting and Logging</li> <li>Selenium Grid</li> <li>Git and GitHub</li> <li>Jenkins and CI/CD</li> <li>Real-Time Selenium Projects</li> </ol> <hr> <h2>80. Final Summary</h2> <p><strong>HTML Basics for Testers</strong> provides the foundation required to understand how web pages are structured and how Selenium interacts with those structures. A tester who understands HTML can inspect web elements, identify stable attributes, create better locators, understand DOM relationships, automate forms, validate UI behavior, and troubleshoot Selenium automation failures more effectively.</p> </div>
</div>
<!-- Previous/Next Navigation -->
<div class="topic-navigation">
<a href="https://www.justacademy.co/resources/selenium-tutorial-complete-guide-to-web-automation-testing/closing-and-quitting-browser" class="btn">
<i class="fas fa-arrow-left"></i> Previous
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Basics for Testers",
"description": "c HTML Basics for Testers HTML (HyperText Markup Language) is the standard markup language used to create and structure content on web pages. For software teste...",
"image": "https://www.justacademy.co/assets/images/logo.png",
"datePublished": "2026-09-25T13:13:57+05:30",
"author": {"@type": "Organization", "name": "JustAcademy"},
"publisher": {"@type": "Organization", "name": "JustAcademy"}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.justacademy.co"},
{"@type": "ListItem", "position": 2, "name": "Resources", "item": "https://www.justacademy.co/resources"},
{"@type": "ListItem", "position": 3, "name": "Selenium Tutorial: Complete Guide to Web Automation Testing", "item": "https://www.justacademy.co/resources/selenium-tutorial-complete-guide-to-web-automation-testing"},
{"@type": "ListItem", "position": 4, "name": "HTML Basics for Testers", "item": "https://www.justacademy.co/resources/selenium-tutorial-complete-guide-to-web-automation-testing/html-basics-for-testers"}
]
}
</script>
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-autoloader.min.js" defer></script>
<script>
// Highlight code blocks with Prism after page load (for TinyMCE codesample blocks)
document.addEventListener('DOMContentLoaded', function() {
// Legacy support: Convert Quill .ql-syntax blocks to Prism language-markup
var legacyBlocks = document.querySelectorAll('pre.ql-syntax');
legacyBlocks.forEach(function(el) {
el.className = 'language-markup';
// Wrap content in code tag if missing (Prism expects pre > code)
if (!el.querySelector('code')) {
var code = document.createElement('code');
code.innerHTML = el.innerHTML;
el.innerHTML = '';
el.appendChild(code);
}
});
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
});
// Add copy button to each code block
document.querySelectorAll('.topic-content pre').forEach(function(pre) {
var btn = document.createElement('button');
btn.className = 'code-copy-btn';
btn.textContent = 'Copy';
pre.appendChild(btn);
btn.addEventListener('click', function() {
// Collect only text nodes and code elements, excluding the button
var text = '';
pre.childNodes.forEach(function(node) {
if (node === btn) return;
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
} else if (node.tagName) {
text += node.innerText || node.textContent;
}
});
text = text.trim();
navigator.clipboard.writeText(text).then(function() {
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
}).catch(function() {
var ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
});
});
});
</script>
<!-- Collapsible Query Form -->
<div id="dropQueryContainer" class="drop-query-container collapsed">
<div id="dropQueryToggle" class="drop-query-toggle">
<span class="query-text">Drop us a Query</span>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div id="dropQueryForm" class="drop-query-form">
<div class="query-form-content">
<div class="query-header">
<div class="query-contact">
<div class="contact-info">
<div class="contact-details">
<div class="phone-number">
<i class="fas fa-phone"></i>
<span>+91 99871 84296</span>
</div>
<div class="availability">Available 24x7 for your queries</div>
</div>
</div>
</div>
</div>
<form id="dropQueryFormSubmit" method="post" action="https://www.justacademy.co/enquiry">
<input type="hidden" name="_token" value="ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu" autocomplete="off"> <input type="hidden" name="form_id" value="drop_query_global">
<input type="hidden" name="source_url" value="https://www.justacademy.co/resources/selenium-tutorial-complete-guide-to-web-automation-testing/html-basics-for-testers">
<div class="form-group">
<textarea name="description" class="form-control query-textarea" placeholder="Type your query here*" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="phone_number">Phone Number</label>
<div class="phone-input-container">
<select name="country_id" class="country-select" id="countrySelect" required>
<option value="1" >
Afghanistan (+93)
</option>
<option value="2" >
Albania (+355)
</option>
<option value="3" >
Algeria (+213)
</option>
<option value="4" >
American Samoa (+1)
</option>
<option value="5" >
Andorra (+376)
</option>
<option value="6" >
Angola (+244)
</option>
<option value="7" >
Anguilla (+1)
</option>
<option value="8" >
Antarctica (+672)
</option>
<option value="9" >
Antigua And Barbuda (+1)
</option>
<option value="10" >
Argentina (+54)
</option>
<option value="11" >
Armenia (+374)
</option>
<option value="12" >
Aruba (+297)
</option>
<option value="13" >
Australia (+61)
</option>
<option value="14" >
Austria (+43)
</option>
<option value="15" >
Azerbaijan (+994)
</option>
<option value="16" >
Bahamas The (+1)
</option>
<option value="17" >
Bahrain (+973)
</option>
<option value="18" >
Bangladesh (+880)
</option>
<option value="19" >
Barbados (+1)
</option>
<option value="20" >
Belarus (+375)
</option>
<option value="21" >
Belgium (+32)
</option>
<option value="22" >
Belize (+501)
</option>
<option value="23" >
Benin (+229)
</option>
<option value="24" >
Bermuda (+1)
</option>
<option value="25" >
Bhutan (+975)
</option>
<option value="26" >
Bolivia (+591)
</option>
<option value="27" >
Bosnia and Herzegovina (+387)
</option>
<option value="28" >
Botswana (+267)
</option>
<option value="29" >
Bouvet Island (+47)
</option>
<option value="30" >
Brazil (+55)
</option>
<option value="31" >
British Indian Ocean Territory (+246)
</option>
<option value="32" >
Brunei (+673)
</option>
<option value="33" >
Bulgaria (+359)
</option>
<option value="34" >
Burkina Faso (+226)
</option>
<option value="35" >
Burundi (+257)
</option>
<option value="36" >
Cambodia (+855)
</option>
<option value="37" >
Cameroon (+237)
</option>
<option value="38" >
Canada (+1)
</option>
<option value="39" >
Cape Verde (+238)
</option>
<option value="40" >
Cayman Islands (+1)
</option>
<option value="41" >
Central African Republic (+236)
</option>
<option value="42" >
Chad (+235)
</option>
<option value="43" >
Chile (+56)
</option>
<option value="44" >
China (+86)
</option>
<option value="45" >
Christmas Island (+61)
</option>
<option value="46" >
Cocos (Keeling) Islands (A$)
</option>
<option value="47" >
Colombia (+57)
</option>
<option value="48" >
Comoros (+269)
</option>
<option value="49" >
Republic Of The Congo (+242)
</option>
<option value="50" >
Democratic Republic Of The Congo (+243)
</option>
<option value="51" >
Cook Islands (+682)
</option>
<option value="52" >
Costa Rica (+506)
</option>
<option value="53" >
Cote D'Ivoire (Ivory Coast) (+225)
</option>
<option value="54" >
Croatia (Hrvatska) (+385)
</option>
<option value="55" >
Cuba (+53)
</option>
<option value="56" >
Cyprus (+357)
</option>
<option value="57" >
Czech Republic (+420)
</option>
<option value="58" >
Denmark (+45)
</option>
<option value="59" >
Djibouti (+253)
</option>
<option value="60" >
Dominica (+1)
</option>
<option value="61" >
Dominican Republic (+1)
</option>
<option value="62" >
East Timor (+670)
</option>
<option value="63" >
Ecuador (+593)
</option>
<option value="64" >
Egypt (+20)
</option>
<option value="65" >
El Salvador (+503)
</option>
<option value="66" >
Equatorial Guinea (+240)
</option>
<option value="67" >
Eritrea (+291)
</option>
<option value="68" >
Estonia (+372)
</option>
<option value="69" >
Ethiopia (+251)
</option>
<option value="70" >
External Territories of Australia (+672)
</option>
<option value="71" >
Falkland Islands (+500)
</option>
<option value="72" >
Faroe Islands (+298)
</option>
<option value="73" >
Fiji Islands (+679)
</option>
<option value="74" >
Finland (+358)
</option>
<option value="75" >
France (+33)
</option>
<option value="76" >
French Guiana (+594)
</option>
<option value="77" >
French Polynesia (+689)
</option>
<option value="78" >
French Southern Territories (+262)
</option>
<option value="79" >
Gabon (+241)
</option>
<option value="80" >
Gambia The (+220)
</option>
<option value="81" >
Georgia (+995)
</option>
<option value="82" >
Germany (+49)
</option>
<option value="83" >
Ghana (+233)
</option>
<option value="84" >
Gibraltar (+350)
</option>
<option value="85" >
Greece (+30)
</option>
<option value="86" >
Greenland (+299)
</option>
<option value="87" >
Grenada (+1)
</option>
<option value="88" >
Guadeloupe (+590)
</option>
<option value="89" >
Guam (+1)
</option>
<option value="90" >
Guatemala (+502)
</option>
<option value="91" >
Guernsey and Alderney (+44-1481)
</option>
<option value="92" >
Guinea (+224)
</option>
<option value="93" >
Guinea-Bissau (+245)
</option>
<option value="94" >
Guyana (+592)
</option>
<option value="95" >
Haiti (+509)
</option>
<option value="96" >
Heard and McDonald Islands (+672)
</option>
<option value="97" >
Honduras (+504)
</option>
<option value="98" >
Hong Kong S.A.R. (+852)
</option>
<option value="99" >
Hungary (+36)
</option>
<option value="100" >
Iceland (+354)
</option>
<option value="101" selected >
India (+91)
</option>
<option value="102" >
Indonesia (+62)
</option>
<option value="103" >
Iran (+98)
</option>
<option value="104" >
Iraq (+964)
</option>
<option value="105" >
Ireland (+353)
</option>
<option value="106" >
Israel (+972)
</option>
<option value="107" >
Italy (+39)
</option>
<option value="108" >
Jamaica (+1)
</option>
<option value="109" >
Japan (+81)
</option>
<option value="110" >
Jersey (+44)
</option>
<option value="111" >
Jordan (+962)
</option>
<option value="112" >
Kazakhstan (+7)
</option>
<option value="113" >
Kenya (+254)
</option>
<option value="114" >
Kiribati (+686)
</option>
<option value="115" >
Korea North (+850)
</option>
<option value="116" >
Korea South (+82)
</option>
<option value="117" >
Kuwait (+965)
</option>
<option value="118" >
Kyrgyzstan (+996)
</option>
<option value="119" >
Laos (+856)
</option>
<option value="120" >
Latvia (+371)
</option>
<option value="121" >
Lebanon (+961)
</option>
<option value="122" >
Lesotho (+266)
</option>
<option value="123" >
Liberia (+231)
</option>
<option value="124" >
Libya (+218)
</option>
<option value="125" >
Liechtenstein (+423)
</option>
<option value="126" >
Lithuania (+370)
</option>
<option value="127" >
Luxembourg (+352)
</option>
<option value="128" >
Macau S.A.R. (+853)
</option>
<option value="129" >
Macedonia (+389)
</option>
<option value="130" >
Madagascar (+261)
</option>
<option value="131" >
Malawi (+265)
</option>
<option value="132" >
Malaysia (+60)
</option>
<option value="133" >
Maldives (+960)
</option>
<option value="134" >
Mali (+223)
</option>
<option value="135" >
Malta (+356)
</option>
<option value="136" >
Man (Isle of) (+44)
</option>
<option value="137" >
Marshall Islands (+692)
</option>
<option value="138" >
Martinique (+596)
</option>
<option value="139" >
Mauritania (+222)
</option>
<option value="140" >
Mauritius (+230)
</option>
<option value="141" >
Mayotte (+262)
</option>
<option value="142" >
Mexico (+52)
</option>
<option value="143" >
Micronesia (+691)
</option>
<option value="144" >
Moldova (+373)
</option>
<option value="145" >
Monaco (+377)
</option>
<option value="146" >
Mongolia (+976)
</option>
<option value="147" >
Montserrat (+1)
</option>
<option value="148" >
Morocco (+212)
</option>
<option value="149" >
Mozambique (+258)
</option>
<option value="150" >
Myanmar (+95)
</option>
<option value="151" >
Namibia (+264)
</option>
<option value="152" >
Nauru (+674)
</option>
<option value="153" >
Nepal (+977)
</option>
<option value="154" >
Netherlands Antilles (+599)
</option>
<option value="155" >
Netherlands The (+31)
</option>
<option value="156" >
New Caledonia (+687)
</option>
<option value="157" >
New Zealand (+64)
</option>
<option value="158" >
Nicaragua (+505)
</option>
<option value="159" >
Niger (+227)
</option>
<option value="160" >
Nigeria (+234)
</option>
<option value="161" >
Niue (+683)
</option>
<option value="162" >
Norfolk Island (+672)
</option>
<option value="163" >
Northern Mariana Islands (+672)
</option>
<option value="164" >
Norway (+47)
</option>
<option value="165" >
Oman (+968)
</option>
<option value="166" >
Pakistan (+92)
</option>
<option value="167" >
Palau (+680)
</option>
<option value="168" >
Palestinian Territory Occupied (+970)
</option>
<option value="169" >
Panama (+507)
</option>
<option value="170" >
Papua new Guinea (+675)
</option>
<option value="171" >
Paraguay (+595)
</option>
<option value="172" >
Peru (+51)
</option>
<option value="173" >
Philippines (+63)
</option>
<option value="174" >
Pitcairn Island (+64)
</option>
<option value="175" >
Poland (+48)
</option>
<option value="176" >
Portugal (+351)
</option>
<option value="177" >
Puerto Rico (+1)
</option>
<option value="178" >
Qatar (+974)
</option>
<option value="179" >
Reunion (+262)
</option>
<option value="180" >
Romania (+40)
</option>
<option value="181" >
Russia (+7)
</option>
<option value="182" >
Rwanda (+250)
</option>
<option value="183" >
Saint Helena (+290)
</option>
<option value="184" >
Saint Kitts And Nevis (+1)
</option>
<option value="185" >
Saint Lucia (+1)
</option>
<option value="186" >
Saint Pierre and Miquelon (+508)
</option>
<option value="187" >
Saint Vincent And The Grenadines (+1)
</option>
<option value="188" >
Samoa (+685)
</option>
<option value="189" >
San Marino (+378)
</option>
<option value="190" >
Sao Tome and Principe (+239)
</option>
<option value="191" >
Saudi Arabia (+966)
</option>
<option value="192" >
Senegal (+221)
</option>
<option value="193" >
Serbia (+381)
</option>
<option value="194" >
Seychelles (+248)
</option>
<option value="195" >
Sierra Leone (+232)
</option>
<option value="196" >
Singapore (+65)
</option>
<option value="197" >
Slovakia (+421)
</option>
<option value="198" >
Slovenia (+386)
</option>
<option value="199" >
Smaller Territories of the UK (+44)
</option>
<option value="200" >
Solomon Islands (+677)
</option>
<option value="201" >
Somalia (+252)
</option>
<option value="202" >
South Africa (+27)
</option>
<option value="203" >
South Georgia (+500)
</option>
<option value="204" >
South Sudan (+211)
</option>
<option value="205" >
Spain (+34)
</option>
<option value="206" >
Sri Lanka (+94)
</option>
<option value="207" >
Sudan (+249)
</option>
<option value="208" >
Suriname (+597)
</option>
<option value="209" >
Svalbard And Jan Mayen Islands (+47)
</option>
<option value="210" >
Swaziland (+268)
</option>
<option value="211" >
Sweden (+46)
</option>
<option value="212" >
Switzerland (+41)
</option>
<option value="213" >
Syria (+963)
</option>
<option value="214" >
Taiwan (+886)
</option>
<option value="215" >
Tajikistan (+992)
</option>
<option value="216" >
Tanzania (+255)
</option>
<option value="217" >
Thailand (+66)
</option>
<option value="218" >
Togo (+228)
</option>
<option value="219" >
Tokelau (+690)
</option>
<option value="220" >
Tonga (+676)
</option>
<option value="221" >
Trinidad And Tobago (+1)
</option>
<option value="222" >
Tunisia (+216)
</option>
<option value="223" >
Turkey (+90)
</option>
<option value="224" >
Turkmenistan (+993)
</option>
<option value="225" >
Turks And Caicos Islands (+1)
</option>
<option value="226" >
Tuvalu (+688)
</option>
<option value="227" >
Uganda (+256)
</option>
<option value="228" >
Ukraine (+380)
</option>
<option value="229" >
United Arab Emirates (+971)
</option>
<option value="230" >
United Kingdom (+44)
</option>
<option value="231" >
United States (+1)
</option>
<option value="232" >
United States Minor Outlying Islands (+1)
</option>
<option value="233" >
Uruguay (+598)
</option>
<option value="234" >
Uzbekistan (+998)
</option>
<option value="235" >
Vanuatu (+678)
</option>
<option value="236" >
Vatican City State (Holy See) (+379)
</option>
<option value="237" >
Venezuela (+58)
</option>
<option value="238" >
Vietnam (+84)
</option>
<option value="239" >
Virgin Islands (British) (+1)
</option>
<option value="240" >
Virgin Islands (US) (+1)
</option>
<option value="241" >
Wallis And Futuna Islands (+681)
</option>
<option value="242" >
Western Sahara (+212)
</option>
<option value="243" >
Yemen (+967)
</option>
<option value="244" >
Yugoslavia (+38)
</option>
<option value="245" >
Zambia (+260)
</option>
<option value="246" >
Zimbabwe (+263)
</option>
</select>
<input type="text" name="phone" class="form-control phone-input" placeholder="Enter Phone Number*" required>
</div>
</div>
<div class="form-group">
<label for="email">Email Id</label>
<div class="email-input-container">
<input type="email" name="email" class="form-control email-input" placeholder="Enter your email*" required>
<i class="fas fa-envelope email-icon"></i>
</div>
</div>
<!-- Add Google reCAPTCHA -->
<div class="form-group recaptcha-container">
<div id="drop-query-recaptcha" class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS" data-form="drop-query"></div>
</div>
<button type="submit" class="btn btn-submit-query">SUBMIT QUERY</button>
</form>
</div>
</div>
</div>
<!--=================================
footer-->
<footer class="footer">
<!--<div class="space-ptb bg-overlay-white-97" style="background-image: url('images/bg/footer-bg.webp');">-->
<div class="space-ptb pb-2" style=" background-color: #f8f8f8;">
<div class="container">
<div class="row position-relative">
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<div class="footer-contact-info">
<div class="footer-logo mb-2">
<a href="https://www.justacademy.co"><img class="img-fluid" src="https://www.justacademy.co/logo.png" alt=""></a>
</div>
<div class="contact-address">
<div class="contact-item mb-3 mb-md-4">
<p>1201, 12th Floor, Star Plaza, <br>Mahatma Gandhi Rd, Chinchpada, <br>Opp Borivali East Station, <br>Borivali - East, Mumbai - 400066</p>
</div>
<div class="contact-item mb-3 mb-md-4">
<h4 class="mb-0 fw-normal"><a href="tel:+919987184296">+91-9987184296</a></h4>
</div>
<div class="contact-item">
<a href="mailto:info@justacademy.co">info@justacademy.co</a>
</div>
<div class="contact-item mt-3" id="google-play-badge">
<a href="https://play.google.com/store/apps/details?id=com.pc.justacademy&hl=en_IN" target="_blank">
<img src="https://www.justacademy.co/images/google-play.png" alt="Get it on Google Play" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3 col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">Explore</h5>
<div class="footer-link">
<ul class="list-unstyled mb-0">
<li><a href="https://www.justacademy.co/job-bootcamp">Job Bootcamp</a></li>
<li><a href="https://www.justacademy.co/program">Programs</a></li>
<li><a href="https://www.justacademy.co/learning">Learning Resources</a></li>
<li><a href="https://www.justacademy.co/about-us">About Us</a></li>
<li><a href="https://www.justacademy.co/contact-us">Contact Us</a></li>
<li><a href="https://www.justacademy.co/connect-with-us">Connect With Us</a></li>
<li><a href="https://www.justacademy.co/become-a-instructor">Become an Instructor</a></li>
<li><a href="https://www.justacademy.co/all-courses">All Courses</a></li>
<li><a href="https://www.justacademy.co/webinars">Webinars</a></li>
<li><a href="https://www.justacademy.co/contact-us">Contact us</a></li>
<li><a href="https://www.justacademy.co/blog-site-map">Blog Sitemap</a></li>
</ul>
<!--<ul class="list-unstyled mb-0">-->
<!-- <li><a href="https://www.justacademy.co/term-conditions">Terms & Conditions</a></li>-->
<!-- <li><a href="https://www.justacademy.co/privacy-policy">Privacy Policy</a></li>-->
<!--</ul>-->
</div>
</div>
<div class="col-sm-6 col-xl-3 col-lg-2 mb-4 mb-sm-0">
<h5 class="footer-title">Information</h5>
<div class="footer-link">
<ul class="list-unstyled mb-0">
<li><a href="https://www.justacademy.co/faq">FAQs</a></li>
<li><a href="https://www.justacademy.co/tools">Tools</a></li>
<li><a href="https://www.justacademy.co/term-conditions">Terms & Conditions</a></li>
<li><a href="https://www.justacademy.co/privacy-policy">Privacy Policy</a></li>
<li><a href="https://www.justacademy.co/sitemap.xml">Site Map</a></li>
<li><a href="https://www.justacademy.co/courses-location-list">City Wise Courses</a></li>
<li><a href="https://www.justacademy.co/corporate-training">Corporate Training</a></li>
<li><a href="https://www.justacademy.co/job-bootcamp">Job Bootcamp</a></li>
<li><a href="https://www.justacademy.co/interview-questions">Interview Questions</a></li>
<li><a href="https://www.justacademy.co/reviews">Reviews</a></li>
<li><a href="https://www.justacademy.co/hire-from-justacademy">Hire from Justacademy</a></li>
<li><a href="https://www.justacademy.co/media">Media</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<h5 class="footer-title">Subscribe us</h5>
<p>Sign up to our newsletter to get the latest news and offers.</p>
<form action="https://www.justacademy.co/email_subscribe" method="POST">
<input type="hidden" name="_token" value="ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu" autocomplete="off"> <div class="mb-3">
<input id="email" type="email" class="form-control " placeholder="Email*" name="email" required autocomplete="email">
</div>
<button type="submit" class="btn btn-sm btn-primary">Subscribe</button>
</form>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Career Bootcamps</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-developer-pro-bootcamp-in-mumbai-job-oriented-web-development-training" target="_blank" style="display: inline;">Full Stack Pro Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/front-end-development-bootcamp-in-mumbai-html-css-javascript-react-classroom-training" target="_blank" style="display: inline;">Frontend Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/back-end-development-bootcamp-in-mumbai-nodejs-expressjs-mongodb-classroom-training" target="_blank" style="display: inline;">Backend Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/mern-stack-developer-bootcamp-in-mumbai-full-stack-web-development-classroom-training" target="_blank" style="display: inline;">MERN Stack Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/mean-stack-developer-bootcamp-in-mumbai-full-stack-web-development-classroom-training" target="_blank" style="display: inline;">MEAN Stack Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-qa-automation-bootcamp-in-mumbai-end-to-end-testing-automation-training" target="_blank" style="display: inline;">Full Stack QA Automation Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-mobile-app-development-bootcamp-in-mumbai-flutter-nodejs-mongodb-express-offline-training" target="_blank" style="display: inline;">Full Stack Mobile App Development Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/full-stack-java-developer-bootcamp-in-mumbai-classroom-training-with-real-projects" target="_blank" style="display: inline;">Full Stack Java Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mumbai/data-analytics-bootcamp-in-mumbai-classroom-training-with-real-world-projects" target="_blank" style="display: inline;">Data Analytics Bootcamp in Mumbai | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mean-stack-developer-bootcamp-full-stack-web-development-training-program" target="_blank" style="display: inline;">MEAN Stack Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-qa-automation-bootcamp-end-to-end-testing-training" target="_blank" style="display: inline;">Full Stack QA Testing Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/mean-stack-developer-bootcamp-full-stack-web-development-training-program" target="_blank" style="display: inline;">MERN Stack Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-mobile-app-development-bootcamp-flutter-nodejs-mongodb-express" target="_blank" style="display: inline;">Mobile App Development Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/data-analytics-bootcamp-online-live-training-with-real-world-projects" target="_blank" style="display: inline;">Data Analytics Bootcamp Online | </a>
<a href="https://www.justacademy.co/job-bootcamp-detail/full-stack-java-developer-bootcamp-online-live-interactive-training-with-real-projects" target="_blank" style="display: inline;">Full Stack Java Bootcamp Online</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">In-Demand Courses</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/course-detail/mumbai/microsoft-power-bi-training-in-mumbai" target="_blank" style="display: inline;">Power BI Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/digital-marketing-in-mumbai" target="_blank" style="display: inline;">Digital Marketing Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/mobile-app-testing-using-appium-training-in-mumbai" target="_blank" style="display: inline;">Mobile App Automation Testing Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/figma-training-in-mumbai" target="_blank" style="display: inline;">Figma Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/selenium-training-in-mumbai" target="_blank" style="display: inline;">Selenium Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/mumbai/flutter-training-in-mumbai" target="_blank" style="display: inline;">Flutter Training in Mumbai | </a>
<a href="https://www.justacademy.co/course-detail/digital-marketing" target="_blank" style="display: inline;">Digital Marketing Training Online | </a>
<a href="https://www.justacademy.co/course-detail/mobile-app-testing-using-appium-training" target="_blank" style="display: inline;">Mobile App Automation Testing Online | </a>
<a href="https://www.justacademy.co/course-detail/figma-training" target="_blank" style="display: inline;">Figma Training Online | </a>
<a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" style="display: inline;">Selenium Training Online | </a>
<a href="https://www.justacademy.co/course-detail/flutter-training" target="_blank" style="display: inline;">Flutter Training Online</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Training Locations</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="https://www.justacademy.co/course-detail/delhi/digital-marketing-in-delhi" target="_blank" style="display: inline;">Digital Marketing Training in Delhi | </a>
<a href="https://www.justacademy.co/course-detail/hyderabad/selenium-training-in-hyderabad" target="_blank" style="display: inline;">Selenium Training in Hyderabad | </a>
<a href="https://www.justacademy.co/course-detail/bangalore/microsoft-power-bi-training-in-bangalore" target="_blank" style="display: inline;">Power BI Training in Bangalore | </a>
<a href="https://www.justacademy.co/course-detail/pune/flutter-training-in-pune" target="_blank" style="display: inline;">Flutter Training in Pune</a>
</div>
</div>
</div>
<div class="row position-relative">
<div class="col-sm-12 col-lg-12">
<h5 class="footer-tile">Explore Courses by City</h5>
<div class="contact-item mb-3 mb-md-4">
<a href="/course-list/mumbai" style="display: inline;">Mumbai Courses</a> |
<a href="/course-list/pune" style="display: inline;">Pune Courses</a> |
<a href="/course-list/bangalore" style="display: inline;">Bangalore Courses</a> |
<a href="/course-list/hyderabad" style="display: inline;">Hyderabad Courses</a> |
<a href="/course-list/delhi" style="display: inline;">Delhi Courses</a>
</div>
</div>
</div>
<hr class="mb-1 ">
PMP®,PMI®, PMI-ACP® and PMBOK® are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.
</div>
</div>
<div class="footer-bottom bg-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="social-icon text-md-start text-center mb-3 mb-md-0">
<ul>
<li><a href="https://www.facebook.com/JustAcademyIN/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://twitter.com/justacademy23" target="_blank"><i class="fab fa-twitter"></i></a>
</li>
<li><a href="https://www.linkedin.com/company/justacademy/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="https://www.instagram.com/justacademyin/" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://g.page/r/CTktA68zNHUcEAI/review" target="_blank"><i class="fab fa-google"></i></a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.pc.justacademy&hl=en_IN" target="_blank" title="Download on Google Play" style="color: #01875f !important;"><i class="fab fa-google-play"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="copyright text-md-end text-center">
<p class="mb-0 small">© Copyright 2024 <a href="javascript:void(0)">TRRev Technology</a> All
Rights Reserved.
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--=================================
footer-->
<!--=================================
Modal Popup -->
<!-- Want To Connect Modal -->
<div class="modal login fade" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-advertisement" role="document" style="max-width: 980px; width: 92%;">
<div class="modal-content" style="border-radius: 0px !important;">
<div class="modal-header border-0" style="background-color: #b51d74; border-radius: 0px !important; padding: 15px 20px;">
<h5 class="modal-title text-center" style="width: 100%; text-align: center; color:#fff; font-size: 1.3rem; margin: 0;" id="popupModalLabel">Want To Connect with us</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body modal-body-advertisement" style="padding: 0;">
<div class="row" style="margin: 0;">
<div class="col-sm-7 d-none d-sm-block connect-modal-info-col" style="border-right: 1px solid #ddd; padding: 25px; background: #ffffff; position: relative;">
<div class="text-content" style="color: #333; height: 100%; display: flex; flex-direction: column; justify-content: center;">
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="color: #b51d74; font-weight: bold; margin-bottom: 8px; font-size: 1.3rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">🚀 Kickstart Your IT Career</h3>
<p style="color: #b51d74; font-weight: 600; font-size: 0.95rem; margin: 0 0 6px;">with JustAcademy</p>
<p style="color: #555; font-size: 0.8rem; margin: 0;">Learn Industry-Focused Courses with Live Projects & Placement Assistance</p>
</div>
<div style="background:#f8f9fa; padding:12px; border-radius:10px; margin-bottom:12px;">
<ul style="list-style:none; padding:0; margin:0; font-size:0.8rem; color:#333;">
<li style="margin-bottom:6px;"><strong>Full Stack Java</strong> <span style="color:#777;">(Java, Spring Boot, Hibernate, REST API, React JS)</span></li>
<li style="margin-bottom:6px;"><strong>Data Analytics</strong> <span style="color:#777;">(Excel, SQL, Power BI, Python, Tableau)</span></li>
<li style="margin-bottom:6px;"><strong>MERN Stack</strong> <span style="color:#777;">(MongoDB, Express JS, React JS, Node JS)</span></li>
<li style="margin-bottom:6px;"><strong>Full Stack Python</strong> <span style="color:#777;">(Python, Django, Flask, MySQL, React JS)</span></li>
<li style="margin-bottom:6px;"><strong>Full Stack QA</strong> <span style="color:#777;">(Manual Testing, Selenium, API Testing, Appium)</span></li>
<li style="margin-bottom:0;"><strong>Full Stack Mobile App Dev</strong> <span style="color:#777;">(Flutter, React Native, Firebase, REST API)</span></li>
</ul>
</div>
<div style="background: #fff; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e9ecef; margin-bottom: 15px;">
<ul style="color: #333; list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>100% Practical Training</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Internship & Certification</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Live Project Experience</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Resume & Interview Preparation</li>
<li style="margin-bottom: 5px; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Online + Mumbai Classroom Training</li>
<li style="margin-bottom: 0; position: relative; padding-left: 20px; font-size: 0.82rem;"><i class="fas fa-check-circle" style="position: absolute; left: 0; top: 1px; color: #28a745;"></i>Placement Assistance & Career Support</li>
</ul>
</div>
<div style="padding: 12px; background: linear-gradient(135deg, #b51d74 0%, #8e1554 100%); border-radius: 10px; box-shadow: 0 4px 12px rgba(181, 29, 116, 0.3); text-align: center;">
<p style="color: #fff; font-weight: bold; margin: 0; font-size: 0.9rem;">
🎯 Fill the form now and book your <span style="color: #ffd700;">FREE</span> career counseling + demo session
</p>
</div>
</div>
</div>
<div class="col-sm-5 connect-modal-form-col" style="padding: 25px;">
<form action="https://www.justacademy.co/advertisement-enquiry" method="post" id="advertisementEnquiryForm">
<input type="hidden" name="_token" value="ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu" autocomplete="off"> <div class="form-group mb-2 col-lg-12">
<input type="text" name="name" class="form-control" placeholder="Your name" required style=" font-size: 0.9rem;" />
</div>
<div class="form-group mb-2 col-lg-12">
<input type="email" name="email" class="form-control" placeholder="Your email" required style=" font-size: 0.9rem;" />
</div>
<style>
/* Interested In - flat single bar, no rounded corners */
.btn-outline-brand {
color: #b51d74;
background-color: #fff;
border-color: #b51d74;
}
.btn-outline-brand:hover {
color: #8e1554;
background-color: #f8e8f2;
border-color: #b51d74;
}
.btn-check:checked + .btn-outline-brand {
color: #fff;
background-color: #b51d74;
border-color: #b51d74;
}
#popupModal .btn-group label.btn.btn-outline-brand:first-of-type {
border-radius: 0.375rem 0 0 0.375rem !important;
}
#popupModal .btn-group label.btn.btn-outline-brand:last-of-type {
border-radius: 0 0.375rem 0.375rem 0 !important;
}
/* Select2 styles */
#popupModal .select2-container {
width: 100% !important;
display: block;
}
#popupModal .select2-container--default .select2-selection--single {
height: 38px !important;
padding: 6px 12px !important;
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
font-size: 0.9rem !important;
line-height: 24px !important;
background: white !important;
}
#popupModal .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0 !important;
line-height: 24px !important;
color: #333 !important;
}
#popupModal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px !important;
top: 0 !important;
}
#popupModal .select2-container--default.select2-container--open .select2-selection--single,
#popupModal .select2-container--default.select2-container--focus .select2-selection--single {
border-color: #b51d74 !important;
outline: none !important;
box-shadow: none !important;
}
#popupModal .select2-dropdown {
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
z-index: 10001 !important;
}
#popupModal .select2-results__option--highlighted[aria-selected] {
background-color: #b51d74 !important;
color: #fff !important;
}
#popupModal .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
background-color: #f8e8f2 !important;
color: #b51d74 !important;
}
#popupModal .select2-search__field {
border-radius: 0.25rem !important;
font-size: 0.9rem !important;
}
/* Country + Phone joined unit */
#popupModal .modal-country-phone {
display: flex;
border: 1px solid #ced4da;
border-radius: 0.375rem;
overflow: hidden;
position: relative;
}
#popupModal .modal-country-phone .country-wrapper {
width: 35%;
border-right: 1px solid #ced4da;
flex-shrink: 0;
position: relative;
z-index: 2;
}
#popupModal .modal-country-phone .country-wrapper .select2-container--default .select2-selection--single {
border: none !important;
border-radius: 0 !important;
height: 38px !important;
}
#popupModal .modal-country-phone .phone-input {
flex: 1;
border: none;
outline: none;
padding: 6px 12px;
font-size: 0.9rem;
min-width: 0;
}
#popupModal .modal-country-phone .phone-input:focus {
outline: none;
box-shadow: none;
}
</style>
<div class="form-group mb-3 col-lg-12">
<label class="form-label text-muted" style="font-size: 0.85rem; font-weight: 600; margin-bottom: 5px;">Interested In</label>
<div class="btn-group w-100" role="group" aria-label="Course Type">
<input type="radio" class="btn-check" name="course_type" id="courseTypeRadio" value="course" autocomplete="off" checked>
<label class="btn btn-outline-brand m-0" for="courseTypeRadio" style="font-size: 0.85rem;">Courses</label>
<input type="radio" class="btn-check" name="course_type" id="bootcampTypeRadio" value="bootcamp" autocomplete="off">
<label class="btn btn-outline-brand m-0" for="bootcampTypeRadio" style="font-size: 0.85rem;">Career Programs</label>
</div>
</div>
<div class="form-group mb-3 col-lg-12">
<select name="course" id="modalCourseSelect" required>
<option value="" selected disabled>Select Course</option>
<option value="1" >HTML Training</option>
<option value="2" >Android App Development</option>
<option value="3" >Manual Training</option>
<option value="4" >Adobe Training</option>
<option value="5" >Digital Marketing</option>
<option value="6" >Core Java Training</option>
<option value="7" >CSS Training</option>
<option value="8" >Bootstrap Training</option>
<option value="9" >Javascript Training</option>
<option value="10" >React JS Training</option>
<option value="11" >Node JS Training</option>
<option value="12" >Angular Training</option>
<option value="13" >Django Training</option>
<option value="14" >PHP Training</option>
<option value="16" >Laravel Training</option>
<option value="17" >Codeignitor Training</option>
<option value="18" >Wordpress Training</option>
<option value="19" >jQuery Training</option>
<option value="20" >IOS Training</option>
<option value="21" >Flutter Training</option>
<option value="22" >Ionic Training</option>
<option value="23" >React Native Training</option>
<option value="24" >Augmented Reality Training</option>
<option value="25" >Advance Java Training</option>
<option value="26" >Selenium Training</option>
<option value="27" >Performance Training</option>
<option value="28" >Photoshop Training</option>
<option value="29" >Illustrator Training</option>
<option value="30" >Figma Training</option>
<option value="31" >SEO Training</option>
<option value="379" >SAP ABAP Training</option>
<option value="382" >Microsoft Azure Training</option>
<option value="392" >ASP .NET Training</option>
<option value="400" >SAP ABAP On HANA Training</option>
<option value="429" >SAP FIORI Training</option>
<option value="459" >SAP MM Training</option>
<option value="461" >SAP SD Training</option>
<option value="508" >PMP Certification Training</option>
<option value="521" >PMI® Agile Certified Practitioner Training</option>
<option value="522" >Python Training</option>
<option value="523" >Machine Learning</option>
<option value="528" >Microsoft Power BI Training</option>
<option value="538" >Tableau Training</option>
<option value="569" >Alteryx Training</option>
<option value="572" >MySQL Training</option>
<option value="585" >SalesForce Training</option>
<option value="634" >Mobile App Testing Using Appium Training</option>
<option value="635" >Continuous Testing in DevOps Training</option>
<option value="636" >AWS Training</option>
<option value="637" >Deep Learning</option>
<option value="638" >DevOps Training</option>
<option value="640" >Certified Scrum Master® (CSM) Certification Training</option>
<option value="641" >PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642" >GCP Certification Training</option>
<option value="23220" >Advanced Excel & Power BI</option>
<option value="23221" >Power BI and SQL</option>
<option value="23222" >Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<div class="modal-country-phone">
<div class="country-wrapper">
<select name="country_id" id="modalCountrySelect" required>
<option value="1" data-abbr="AF" data-isd="+93">Afghanistan (+93)</option>
<option value="2" data-abbr="AL" data-isd="+355">Albania (+355)</option>
<option value="3" data-abbr="DZ" data-isd="+213">Algeria (+213)</option>
<option value="4" data-abbr="AS" data-isd="+1">American Samoa (+1)</option>
<option value="5" data-abbr="AD" data-isd="+376">Andorra (+376)</option>
<option value="6" data-abbr="AO" data-isd="+244">Angola (+244)</option>
<option value="7" data-abbr="AI" data-isd="+1">Anguilla (+1)</option>
<option value="8" data-abbr="AQ" data-isd="+672">Antarctica (+672)</option>
<option value="9" data-abbr="AG" data-isd="+1">Antigua And Barbuda (+1)</option>
<option value="10" data-abbr="AR" data-isd="+54">Argentina (+54)</option>
<option value="11" data-abbr="AM" data-isd="+374">Armenia (+374)</option>
<option value="12" data-abbr="AW" data-isd="+297">Aruba (+297)</option>
<option value="13" data-abbr="AU" data-isd="+61">Australia (+61)</option>
<option value="14" data-abbr="AT" data-isd="+43">Austria (+43)</option>
<option value="15" data-abbr="AZ" data-isd="+994">Azerbaijan (+994)</option>
<option value="16" data-abbr="BS" data-isd="+1">Bahamas The (+1)</option>
<option value="17" data-abbr="BH" data-isd="+973">Bahrain (+973)</option>
<option value="18" data-abbr="BD" data-isd="+880">Bangladesh (+880)</option>
<option value="19" data-abbr="BB" data-isd="+1">Barbados (+1)</option>
<option value="20" data-abbr="BY" data-isd="+375">Belarus (+375)</option>
<option value="21" data-abbr="BE" data-isd="+32">Belgium (+32)</option>
<option value="22" data-abbr="BZ" data-isd="+501">Belize (+501)</option>
<option value="23" data-abbr="BJ" data-isd="+229">Benin (+229)</option>
<option value="24" data-abbr="BM" data-isd="+1">Bermuda (+1)</option>
<option value="25" data-abbr="BT" data-isd="+975">Bhutan (+975)</option>
<option value="26" data-abbr="BO" data-isd="+591">Bolivia (+591)</option>
<option value="27" data-abbr="BA" data-isd="+387">Bosnia and Herzegovina (+387)</option>
<option value="28" data-abbr="BW" data-isd="+267">Botswana (+267)</option>
<option value="29" data-abbr="BV" data-isd="+47">Bouvet Island (+47)</option>
<option value="30" data-abbr="BR" data-isd="+55">Brazil (+55)</option>
<option value="31" data-abbr="IO" data-isd="+246">British Indian Ocean Territory (+246)</option>
<option value="32" data-abbr="BN" data-isd="+673">Brunei (+673)</option>
<option value="33" data-abbr="BG" data-isd="+359">Bulgaria (+359)</option>
<option value="34" data-abbr="BF" data-isd="+226">Burkina Faso (+226)</option>
<option value="35" data-abbr="BI" data-isd="+257">Burundi (+257)</option>
<option value="36" data-abbr="KH" data-isd="+855">Cambodia (+855)</option>
<option value="37" data-abbr="CM" data-isd="+237">Cameroon (+237)</option>
<option value="38" data-abbr="CA" data-isd="+1">Canada (+1)</option>
<option value="39" data-abbr="CV" data-isd="+238">Cape Verde (+238)</option>
<option value="40" data-abbr="KY" data-isd="+1">Cayman Islands (+1)</option>
<option value="41" data-abbr="CF" data-isd="+236">Central African Republic (+236)</option>
<option value="42" data-abbr="TD" data-isd="+235">Chad (+235)</option>
<option value="43" data-abbr="CL" data-isd="+56">Chile (+56)</option>
<option value="44" data-abbr="CN" data-isd="+86">China (+86)</option>
<option value="45" data-abbr="CX" data-isd="+61">Christmas Island (+61)</option>
<option value="46" data-abbr="CC" data-isd="A$">Cocos (Keeling) Islands (A$)</option>
<option value="47" data-abbr="CO" data-isd="+57">Colombia (+57)</option>
<option value="48" data-abbr="KM" data-isd="+269">Comoros (+269)</option>
<option value="49" data-abbr="CG" data-isd="+242">Republic Of The Congo (+242)</option>
<option value="50" data-abbr="CD" data-isd="+243">Democratic Republic Of The Congo (+243)</option>
<option value="51" data-abbr="CK" data-isd="+682">Cook Islands (+682)</option>
<option value="52" data-abbr="CR" data-isd="+506">Costa Rica (+506)</option>
<option value="53" data-abbr="CI" data-isd="+225">Cote D'Ivoire (Ivory Coast) (+225)</option>
<option value="54" data-abbr="HR" data-isd="+385">Croatia (Hrvatska) (+385)</option>
<option value="55" data-abbr="CU" data-isd="+53">Cuba (+53)</option>
<option value="56" data-abbr="CY" data-isd="+357">Cyprus (+357)</option>
<option value="57" data-abbr="CZ" data-isd="+420">Czech Republic (+420)</option>
<option value="58" data-abbr="DK" data-isd="+45">Denmark (+45)</option>
<option value="59" data-abbr="DJ" data-isd="+253">Djibouti (+253)</option>
<option value="60" data-abbr="DM" data-isd="+1">Dominica (+1)</option>
<option value="61" data-abbr="DO" data-isd="+1">Dominican Republic (+1)</option>
<option value="62" data-abbr="TP" data-isd="+670">East Timor (+670)</option>
<option value="63" data-abbr="EC" data-isd="+593">Ecuador (+593)</option>
<option value="64" data-abbr="EG" data-isd="+20">Egypt (+20)</option>
<option value="65" data-abbr="SV" data-isd="+503">El Salvador (+503)</option>
<option value="66" data-abbr="GQ" data-isd="+240">Equatorial Guinea (+240)</option>
<option value="67" data-abbr="ER" data-isd="+291">Eritrea (+291)</option>
<option value="68" data-abbr="EE" data-isd="+372">Estonia (+372)</option>
<option value="69" data-abbr="ET" data-isd="+251">Ethiopia (+251)</option>
<option value="70" data-abbr="XA" data-isd="+672">External Territories of Australia (+672)</option>
<option value="71" data-abbr="FK" data-isd="+500">Falkland Islands (+500)</option>
<option value="72" data-abbr="FO" data-isd="+298">Faroe Islands (+298)</option>
<option value="73" data-abbr="FJ" data-isd="+679">Fiji Islands (+679)</option>
<option value="74" data-abbr="FI" data-isd="+358">Finland (+358)</option>
<option value="75" data-abbr="FR" data-isd="+33">France (+33)</option>
<option value="76" data-abbr="GF" data-isd="+594">French Guiana (+594)</option>
<option value="77" data-abbr="PF" data-isd="+689">French Polynesia (+689)</option>
<option value="78" data-abbr="TF" data-isd="+262">French Southern Territories (+262)</option>
<option value="79" data-abbr="GA" data-isd="+241">Gabon (+241)</option>
<option value="80" data-abbr="GM" data-isd="+220">Gambia The (+220)</option>
<option value="81" data-abbr="GE" data-isd="+995">Georgia (+995)</option>
<option value="82" data-abbr="DE" data-isd="+49">Germany (+49)</option>
<option value="83" data-abbr="GH" data-isd="+233">Ghana (+233)</option>
<option value="84" data-abbr="GI" data-isd="+350">Gibraltar (+350)</option>
<option value="85" data-abbr="GR" data-isd="+30">Greece (+30)</option>
<option value="86" data-abbr="GL" data-isd="+299">Greenland (+299)</option>
<option value="87" data-abbr="GD" data-isd="+1">Grenada (+1)</option>
<option value="88" data-abbr="GP" data-isd="+590">Guadeloupe (+590)</option>
<option value="89" data-abbr="GU" data-isd="+1">Guam (+1)</option>
<option value="90" data-abbr="GT" data-isd="+502">Guatemala (+502)</option>
<option value="91" data-abbr="XU" data-isd="+44-1481">Guernsey and Alderney (+44-1481)</option>
<option value="92" data-abbr="GN" data-isd="+224">Guinea (+224)</option>
<option value="93" data-abbr="GW" data-isd="+245">Guinea-Bissau (+245)</option>
<option value="94" data-abbr="GY" data-isd="+592">Guyana (+592)</option>
<option value="95" data-abbr="HT" data-isd="+509">Haiti (+509)</option>
<option value="96" data-abbr="HM" data-isd="+672">Heard and McDonald Islands (+672)</option>
<option value="97" data-abbr="HN" data-isd="+504">Honduras (+504)</option>
<option value="98" data-abbr="HK" data-isd="+852">Hong Kong S.A.R. (+852)</option>
<option value="99" data-abbr="HU" data-isd="+36">Hungary (+36)</option>
<option value="100" data-abbr="IS" data-isd="+354">Iceland (+354)</option>
<option value="101" selected data-abbr="IN" data-isd="+91">India (+91)</option>
<option value="102" data-abbr="ID" data-isd="+62">Indonesia (+62)</option>
<option value="103" data-abbr="IR" data-isd="+98">Iran (+98)</option>
<option value="104" data-abbr="IQ" data-isd="+964">Iraq (+964)</option>
<option value="105" data-abbr="IE" data-isd="+353">Ireland (+353)</option>
<option value="106" data-abbr="IL" data-isd="+972">Israel (+972)</option>
<option value="107" data-abbr="IT" data-isd="+39">Italy (+39)</option>
<option value="108" data-abbr="JM" data-isd="+1">Jamaica (+1)</option>
<option value="109" data-abbr="JP" data-isd="+81">Japan (+81)</option>
<option value="110" data-abbr="XJ" data-isd="+44">Jersey (+44)</option>
<option value="111" data-abbr="JO" data-isd="+962">Jordan (+962)</option>
<option value="112" data-abbr="KZ" data-isd="+7">Kazakhstan (+7)</option>
<option value="113" data-abbr="KE" data-isd="+254">Kenya (+254)</option>
<option value="114" data-abbr="KI" data-isd="+686">Kiribati (+686)</option>
<option value="115" data-abbr="KP" data-isd="+850">Korea North (+850)</option>
<option value="116" data-abbr="KR" data-isd="+82">Korea South (+82)</option>
<option value="117" data-abbr="KW" data-isd="+965">Kuwait (+965)</option>
<option value="118" data-abbr="KG" data-isd="+996">Kyrgyzstan (+996)</option>
<option value="119" data-abbr="LA" data-isd="+856">Laos (+856)</option>
<option value="120" data-abbr="LV" data-isd="+371">Latvia (+371)</option>
<option value="121" data-abbr="LB" data-isd="+961">Lebanon (+961)</option>
<option value="122" data-abbr="LS" data-isd="+266">Lesotho (+266)</option>
<option value="123" data-abbr="LR" data-isd="+231">Liberia (+231)</option>
<option value="124" data-abbr="LY" data-isd="+218">Libya (+218)</option>
<option value="125" data-abbr="LI" data-isd="+423">Liechtenstein (+423)</option>
<option value="126" data-abbr="LT" data-isd="+370">Lithuania (+370)</option>
<option value="127" data-abbr="LU" data-isd="+352">Luxembourg (+352)</option>
<option value="128" data-abbr="MO" data-isd="+853">Macau S.A.R. (+853)</option>
<option value="129" data-abbr="MK" data-isd="+389">Macedonia (+389)</option>
<option value="130" data-abbr="MG" data-isd="+261">Madagascar (+261)</option>
<option value="131" data-abbr="MW" data-isd="+265">Malawi (+265)</option>
<option value="132" data-abbr="MY" data-isd="+60">Malaysia (+60)</option>
<option value="133" data-abbr="MV" data-isd="+960">Maldives (+960)</option>
<option value="134" data-abbr="ML" data-isd="+223">Mali (+223)</option>
<option value="135" data-abbr="MT" data-isd="+356">Malta (+356)</option>
<option value="136" data-abbr="XM" data-isd="+44">Man (Isle of) (+44)</option>
<option value="137" data-abbr="MH" data-isd="+692">Marshall Islands (+692)</option>
<option value="138" data-abbr="MQ" data-isd="+596">Martinique (+596)</option>
<option value="139" data-abbr="MR" data-isd="+222">Mauritania (+222)</option>
<option value="140" data-abbr="MU" data-isd="+230">Mauritius (+230)</option>
<option value="141" data-abbr="YT" data-isd="+262">Mayotte (+262)</option>
<option value="142" data-abbr="MX" data-isd="+52">Mexico (+52)</option>
<option value="143" data-abbr="FM" data-isd="+691">Micronesia (+691)</option>
<option value="144" data-abbr="MD" data-isd="+373">Moldova (+373)</option>
<option value="145" data-abbr="MC" data-isd="+377">Monaco (+377)</option>
<option value="146" data-abbr="MN" data-isd="+976">Mongolia (+976)</option>
<option value="147" data-abbr="MS" data-isd="+1">Montserrat (+1)</option>
<option value="148" data-abbr="MA" data-isd="+212">Morocco (+212)</option>
<option value="149" data-abbr="MZ" data-isd="+258">Mozambique (+258)</option>
<option value="150" data-abbr="MM" data-isd="+95">Myanmar (+95)</option>
<option value="151" data-abbr="NA" data-isd="+264">Namibia (+264)</option>
<option value="152" data-abbr="NR" data-isd="+674">Nauru (+674)</option>
<option value="153" data-abbr="NP" data-isd="+977">Nepal (+977)</option>
<option value="154" data-abbr="AN" data-isd="+599">Netherlands Antilles (+599)</option>
<option value="155" data-abbr="NL" data-isd="+31">Netherlands The (+31)</option>
<option value="156" data-abbr="NC" data-isd="+687">New Caledonia (+687)</option>
<option value="157" data-abbr="NZ" data-isd="+64">New Zealand (+64)</option>
<option value="158" data-abbr="NI" data-isd="+505">Nicaragua (+505)</option>
<option value="159" data-abbr="NE" data-isd="+227">Niger (+227)</option>
<option value="160" data-abbr="NG" data-isd="+234">Nigeria (+234)</option>
<option value="161" data-abbr="NU" data-isd="+683">Niue (+683)</option>
<option value="162" data-abbr="NF" data-isd="+672">Norfolk Island (+672)</option>
<option value="163" data-abbr="MP" data-isd="+672">Northern Mariana Islands (+672)</option>
<option value="164" data-abbr="NO" data-isd="+47">Norway (+47)</option>
<option value="165" data-abbr="OM" data-isd="+968">Oman (+968)</option>
<option value="166" data-abbr="PK" data-isd="+92">Pakistan (+92)</option>
<option value="167" data-abbr="PW" data-isd="+680">Palau (+680)</option>
<option value="168" data-abbr="PS" data-isd="+970">Palestinian Territory Occupied (+970)</option>
<option value="169" data-abbr="PA" data-isd="+507">Panama (+507)</option>
<option value="170" data-abbr="PG" data-isd="+675">Papua new Guinea (+675)</option>
<option value="171" data-abbr="PY" data-isd="+595">Paraguay (+595)</option>
<option value="172" data-abbr="PE" data-isd="+51">Peru (+51)</option>
<option value="173" data-abbr="PH" data-isd="+63">Philippines (+63)</option>
<option value="174" data-abbr="PN" data-isd="+64">Pitcairn Island (+64)</option>
<option value="175" data-abbr="PL" data-isd="+48">Poland (+48)</option>
<option value="176" data-abbr="PT" data-isd="+351">Portugal (+351)</option>
<option value="177" data-abbr="PR" data-isd="+1">Puerto Rico (+1)</option>
<option value="178" data-abbr="QA" data-isd="+974">Qatar (+974)</option>
<option value="179" data-abbr="RE" data-isd="+262">Reunion (+262)</option>
<option value="180" data-abbr="RO" data-isd="+40">Romania (+40)</option>
<option value="181" data-abbr="RU" data-isd="+7">Russia (+7)</option>
<option value="182" data-abbr="RW" data-isd="+250">Rwanda (+250)</option>
<option value="183" data-abbr="SH" data-isd="+290">Saint Helena (+290)</option>
<option value="184" data-abbr="KN" data-isd="+1">Saint Kitts And Nevis (+1)</option>
<option value="185" data-abbr="LC" data-isd="+1">Saint Lucia (+1)</option>
<option value="186" data-abbr="PM" data-isd="+508">Saint Pierre and Miquelon (+508)</option>
<option value="187" data-abbr="VC" data-isd="+1">Saint Vincent And The Grenadines (+1)</option>
<option value="188" data-abbr="WS" data-isd="+685">Samoa (+685)</option>
<option value="189" data-abbr="SM" data-isd="+378">San Marino (+378)</option>
<option value="190" data-abbr="ST" data-isd="+239">Sao Tome and Principe (+239)</option>
<option value="191" data-abbr="SA" data-isd="+966">Saudi Arabia (+966)</option>
<option value="192" data-abbr="SN" data-isd="+221">Senegal (+221)</option>
<option value="193" data-abbr="RS" data-isd="+381">Serbia (+381)</option>
<option value="194" data-abbr="SC" data-isd="+248">Seychelles (+248)</option>
<option value="195" data-abbr="SL" data-isd="+232">Sierra Leone (+232)</option>
<option value="196" data-abbr="SG" data-isd="+65">Singapore (+65)</option>
<option value="197" data-abbr="SK" data-isd="+421">Slovakia (+421)</option>
<option value="198" data-abbr="SI" data-isd="+386">Slovenia (+386)</option>
<option value="199" data-abbr="XG" data-isd="+44">Smaller Territories of the UK (+44)</option>
<option value="200" data-abbr="SB" data-isd="+677">Solomon Islands (+677)</option>
<option value="201" data-abbr="SO" data-isd="+252">Somalia (+252)</option>
<option value="202" data-abbr="ZA" data-isd="+27">South Africa (+27)</option>
<option value="203" data-abbr="GS" data-isd="+500">South Georgia (+500)</option>
<option value="204" data-abbr="SS" data-isd="+211">South Sudan (+211)</option>
<option value="205" data-abbr="ES" data-isd="+34">Spain (+34)</option>
<option value="206" data-abbr="LK" data-isd="+94">Sri Lanka (+94)</option>
<option value="207" data-abbr="SD" data-isd="+249">Sudan (+249)</option>
<option value="208" data-abbr="SR" data-isd="+597">Suriname (+597)</option>
<option value="209" data-abbr="SJ" data-isd="+47">Svalbard And Jan Mayen Islands (+47)</option>
<option value="210" data-abbr="SZ" data-isd="+268">Swaziland (+268)</option>
<option value="211" data-abbr="SE" data-isd="+46">Sweden (+46)</option>
<option value="212" data-abbr="CH" data-isd="+41">Switzerland (+41)</option>
<option value="213" data-abbr="SY" data-isd="+963">Syria (+963)</option>
<option value="214" data-abbr="TW" data-isd="+886">Taiwan (+886)</option>
<option value="215" data-abbr="TJ" data-isd="+992">Tajikistan (+992)</option>
<option value="216" data-abbr="TZ" data-isd="+255">Tanzania (+255)</option>
<option value="217" data-abbr="TH" data-isd="+66">Thailand (+66)</option>
<option value="218" data-abbr="TG" data-isd="+228">Togo (+228)</option>
<option value="219" data-abbr="TK" data-isd="+690">Tokelau (+690)</option>
<option value="220" data-abbr="TO" data-isd="+676">Tonga (+676)</option>
<option value="221" data-abbr="TT" data-isd="+1">Trinidad And Tobago (+1)</option>
<option value="222" data-abbr="TN" data-isd="+216">Tunisia (+216)</option>
<option value="223" data-abbr="TR" data-isd="+90">Turkey (+90)</option>
<option value="224" data-abbr="TM" data-isd="+993">Turkmenistan (+993)</option>
<option value="225" data-abbr="TC" data-isd="+1">Turks And Caicos Islands (+1)</option>
<option value="226" data-abbr="TV" data-isd="+688">Tuvalu (+688)</option>
<option value="227" data-abbr="UG" data-isd="+256">Uganda (+256)</option>
<option value="228" data-abbr="UA" data-isd="+380">Ukraine (+380)</option>
<option value="229" data-abbr="AE" data-isd="+971">United Arab Emirates (+971)</option>
<option value="230" data-abbr="UK" data-isd="+44">United Kingdom (+44)</option>
<option value="231" data-abbr="US" data-isd="+1">United States (+1)</option>
<option value="232" data-abbr="UM" data-isd="+1">United States Minor Outlying Islands (+1)</option>
<option value="233" data-abbr="UY" data-isd="+598">Uruguay (+598)</option>
<option value="234" data-abbr="UZ" data-isd="+998">Uzbekistan (+998)</option>
<option value="235" data-abbr="VU" data-isd="+678">Vanuatu (+678)</option>
<option value="236" data-abbr="VA" data-isd="+379">Vatican City State (Holy See) (+379)</option>
<option value="237" data-abbr="VE" data-isd="+58">Venezuela (+58)</option>
<option value="238" data-abbr="VN" data-isd="+84">Vietnam (+84)</option>
<option value="239" data-abbr="VG" data-isd="+1">Virgin Islands (British) (+1)</option>
<option value="240" data-abbr="VI" data-isd="+1">Virgin Islands (US) (+1)</option>
<option value="241" data-abbr="WF" data-isd="+681">Wallis And Futuna Islands (+681)</option>
<option value="242" data-abbr="EH" data-isd="+212">Western Sahara (+212)</option>
<option value="243" data-abbr="YE" data-isd="+967">Yemen (+967)</option>
<option value="244" data-abbr="YU" data-isd="+38">Yugoslavia (+38)</option>
<option value="245" data-abbr="ZM" data-isd="+260">Zambia (+260)</option>
<option value="246" data-abbr="ZW" data-isd="+263">Zimbabwe (+263)</option>
</select>
</div>
<input type="text" name="phone" class="phone-input" placeholder="Phone Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required />
</div>
</div>
<div class="form-group mb-3 col-lg-12">
<textarea class="form-control" name="description" rows="2" placeholder="Your message" required style="font-size: 0.9rem; resize: none;"></textarea>
</div>
<div class="mb-3 col-sm-12">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"></div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary w-100" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var radioCourse = document.getElementById('courseTypeRadio');
var radioBootcamp = document.getElementById('bootcampTypeRadio');
var courseSelect = document.getElementById('modalCourseSelect');
function loadCourseOptions(type) {
var url = type === 'bootcamp' ? '/api/homepage/bootcamps' : '/api/homepage/courses';
var $select = $(courseSelect);
$select.empty().append('<option value="" selected disabled>Loading...</option>');
if (typeof $.fn.select2 !== 'undefined') $select.trigger('change.select2');
$.get(url, function(response) {
$select.empty().append('<option value="" selected disabled>Select Course</option>');
if (response.success && response.data) {
response.data.forEach(function(item) {
$select.append(new Option(item.name, item.id));
});
}
if (typeof $.fn.select2 !== 'undefined') $select.trigger('change.select2');
});
}
if (radioCourse && radioBootcamp) {
radioCourse.addEventListener('change', function() {
if (this.checked) loadCourseOptions('course');
});
radioBootcamp.addEventListener('change', function() {
if (this.checked) loadCourseOptions('bootcamp');
});
}
var select2Initialized = false;
$('#popupModal').on('shown.bs.modal', function() {
if (typeof $.fn.select2 === 'undefined') return;
if (!select2Initialized) {
var $rightCol = $('#popupModal .connect-modal-form-col');
$('#modalCourseSelect').select2({
dropdownParent: $rightCol,
placeholder: 'Select Course',
allowClear: false,
width: '100%'
});
$('#modalCountrySelect').select2({
dropdownParent: $rightCol,
placeholder: 'Country',
allowClear: false,
width: '100%',
templateResult: function(data) {
if (!data.id) return data.text;
return $('<span>' + data.text + '</span>');
},
templateSelection: function(data) {
if (!data.id) return data.text;
var abbr = $(data.element).data('abbr');
var isd = $(data.element).data('isd');
return abbr + ' (' + isd + ')';
}
});
$('#modalCountrySelect').on('select2:open', function() {
setTimeout(function() {
$rightCol.find('.select2-dropdown').css('width', $rightCol.width() + 'px');
}, 0);
});
select2Initialized = true;
}
});
$('#popupModal').on('hidden.bs.modal', function() {
if (typeof $.fn.select2 === 'undefined') return;
$('#modalCourseSelect').select2('destroy');
$('#modalCountrySelect').select2('destroy');
select2Initialized = false;
});
// Handle form submission via AJAX
$('#advertisementEnquiryForm').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
var formData = new FormData(this);
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: formData,
contentType: false,
processData: false,
headers: {
'Accept': 'application/json'
},
success: function(response) {
if (response.success) {
showCustomNotification(response.message, 'success');
$form[0].reset();
setTimeout(function() {
$('#popupModal').modal('hide');
}, 1000);
} else {
showCustomNotification(response.message, 'error');
}
},
error: function(xhr) {
var errorMessage = 'An error occurred. Please try again.';
if (xhr.status === 422) {
var response = xhr.responseJSON;
if (response.message) {
errorMessage = response.message;
} else if (response.errors) {
var errors = Object.values(response.errors).flat();
errorMessage = errors[0] || errorMessage;
}
} else if (xhr.status === 429) {
var response = xhr.responseJSON;
errorMessage = response.message || 'Rate limit exceeded. Please try again later.';
} else if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
showCustomNotification(errorMessage, 'error');
}
});
});
});
</script>
<!--=================================
Modal Popup -->
<!--=================================
Back To Top -->
<!--<div id="back-to-top" class="back-to-top">-->
<!-- <a href="#"><i class="fas fa-chevron-up"></i></a>-->
<!--</div>-->
<!-- Floating WhatsApp Button -->
<div id="whatsapp-floating">
<a href="https://api.whatsapp.com/send?phone=9987184296" target="_blank" title="Chat with us on WhatsApp">
<img src="https://www.justacademy.co/images/whatsapp.webp" alt="whatsapp">
</a>
</div>
<!-- Mobile Bottom Buttons -->
<div class="mobile-bottom-buttons d-block d-md-none">
<button class="mobile-chat-btn" onclick="window.open('https://api.whatsapp.com/send?phone=9987184296', '_blank')">
<i class="fab fa-whatsapp"></i>
<span>Chat with us</span>
</button>
<button class="mobile-query-btn" onclick="toggleMobileQuery()">
<i class="fas fa-comment-dots"></i>
<span>Drop us a Query</span>
</button>
</div>
<!--=================================
Modal Popup -->
<!-- Book Mentor Session Modal -->
<div class="modal login fade" id="mentorSessionModal" tabindex="-1" role="dialog" aria-labelledby="mentorSessionModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0" style="background-color: #b51d74;">
<h5 class="modal-title text-white" id="mentorSessionModalLabel">Book Mentor Session</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post" class="form-flat-style" action="https://www.justacademy.co/mentor-session-booking">
<input type="hidden" name="_token" value="ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu" autocomplete="off"> Desktop WhatsApp Button -->
<div id="" class="back-to-top d-none d-md-block">
<a href="https://api.whatsapp.com/send?phone=9987184296" target="_blank"><img src="https://www.justacademy.co/images/whatsapp.webp" alt="whatsapp" height="60px" width="60px"></a>
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Your email</label>
<input type="email" name="email" class="form-control" placeholder="Your email" required />
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Phone</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" maxlength="10" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required />
</div>
<div class="form-group mb-3 col-lg-6">
<label class="form-label">Country</label>
<select class="form-control ja-select2" name="country_id" data-placeholder="Select Country" required>
<option value="0" selected disabled>Select Country</option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">American Samoa</option>
<option value="5">Andorra</option>
<option value="6">Angola</option>
<option value="7">Anguilla</option>
<option value="8">Antarctica</option>
<option value="9">Antigua And Barbuda</option>
<option value="10">Argentina</option>
<option value="11">Armenia</option>
<option value="12">Aruba</option>
<option value="13">Australia</option>
<option value="14">Austria</option>
<option value="15">Azerbaijan</option>
<option value="16">Bahamas The</option>
<option value="17">Bahrain</option>
<option value="18">Bangladesh</option>
<option value="19">Barbados</option>
<option value="20">Belarus</option>
<option value="21">Belgium</option>
<option value="22">Belize</option>
<option value="23">Benin</option>
<option value="24">Bermuda</option>
<option value="25">Bhutan</option>
<option value="26">Bolivia</option>
<option value="27">Bosnia and Herzegovina</option>
<option value="28">Botswana</option>
<option value="29">Bouvet Island</option>
<option value="30">Brazil</option>
<option value="31">British Indian Ocean Territory</option>
<option value="32">Brunei</option>
<option value="33">Bulgaria</option>
<option value="34">Burkina Faso</option>
<option value="35">Burundi</option>
<option value="36">Cambodia</option>
<option value="37">Cameroon</option>
<option value="38">Canada</option>
<option value="39">Cape Verde</option>
<option value="40">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="42">Chad</option>
<option value="43">Chile</option>
<option value="44">China</option>
<option value="45">Christmas Island</option>
<option value="46">Cocos (Keeling) Islands</option>
<option value="47">Colombia</option>
<option value="48">Comoros</option>
<option value="49">Republic Of The Congo</option>
<option value="50">Democratic Republic Of The Congo</option>
<option value="51">Cook Islands</option>
<option value="52">Costa Rica</option>
<option value="53">Cote D'Ivoire (Ivory Coast)</option>
<option value="54">Croatia (Hrvatska)</option>
<option value="55">Cuba</option>
<option value="56">Cyprus</option>
<option value="57">Czech Republic</option>
<option value="58">Denmark</option>
<option value="59">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="62">East Timor</option>
<option value="63">Ecuador</option>
<option value="64">Egypt</option>
<option value="65">El Salvador</option>
<option value="66">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="68">Estonia</option>
<option value="69">Ethiopia</option>
<option value="70">External Territories of Australia</option>
<option value="71">Falkland Islands</option>
<option value="72">Faroe Islands</option>
<option value="73">Fiji Islands</option>
<option value="74">Finland</option>
<option value="75">France</option>
<option value="76">French Guiana</option>
<option value="77">French Polynesia</option>
<option value="78">French Southern Territories</option>
<option value="79">Gabon</option>
<option value="80">Gambia The</option>
<option value="81">Georgia</option>
<option value="82">Germany</option>
<option value="83">Ghana</option>
<option value="84">Gibraltar</option>
<option value="85">Greece</option>
<option value="86">Greenland</option>
<option value="87">Grenada</option>
<option value="88">Guadeloupe</option>
<option value="89">Guam</option>
<option value="90">Guatemala</option>
<option value="91">Guernsey and Alderney</option>
<option value="92">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="95">Haiti</option>
<option value="96">Heard and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="98">Hong Kong S.A.R.</option>
<option value="99">Hungary</option>
<option value="100">Iceland</option>
<option value="101">India</option>
<option value="102">Indonesia</option>
<option value="103">Iran</option>
<option value="104">Iraq</option>
<option value="105">Ireland</option>
<option value="106">Israel</option>
<option value="107">Italy</option>
<option value="108">Jamaica</option>
<option value="109">Japan</option>
<option value="110">Jersey</option>
<option value="111">Jordan</option>
<option value="112">Kazakhstan</option>
<option value="113">Kenya</option>
<option value="114">Kiribati</option>
<option value="115">Korea North</option>
<option value="116">Korea South</option>
<option value="117">Kuwait</option>
<option value="118">Kyrgyzstan</option>
<option value="119">Laos</option>
<option value="120">Latvia</option>
<option value="121">Lebanon</option>
<option value="122">Lesotho</option>
<option value="123">Liberia</option>
<option value="124">Libya</option>
<option value="125">Liechtenstein</option>
<option value="126">Lithuania</option>
<option value="127">Luxembourg</option>
<option value="128">Macau S.A.R.</option>
<option value="129">Macedonia</option>
<option value="130">Madagascar</option>
<option value="131">Malawi</option>
<option value="132">Malaysia</option>
<option value="133">Maldives</option>
<option value="134">Mali</option>
<option value="135">Malta</option>
<option value="136">Man (Isle of)</option>
<option value="137">Marshall Islands</option>
<option value="138">Martinique</option>
<option value="139">Mauritania</option>
<option value="140">Mauritius</option>
<option value="141">Mayotte</option>
<option value="142">Mexico</option>
<option value="143">Micronesia</option>
<option value="144">Moldova</option>
<option value="145">Monaco</option>
<option value="146">Mongolia</option>
<option value="147">Montserrat</option>
<option value="148">Morocco</option>
<option value="149">Mozambique</option>
<option value="150">Myanmar</option>
<option value="151">Namibia</option>
<option value="152">Nauru</option>
<option value="153">Nepal</option>
<option value="154">Netherlands Antilles</option>
<option value="155">Netherlands The</option>
<option value="156">New Caledonia</option>
<option value="157">New Zealand</option>
<option value="158">Nicaragua</option>
<option value="159">Niger</option>
<option value="160">Nigeria</option>
<option value="161">Niue</option>
<option value="162">Norfolk Island</option>
<option value="163">Northern Mariana Islands</option>
<option value="164">Norway</option>
<option value="165">Oman</option>
<option value="166">Pakistan</option>
<option value="167">Palau</option>
<option value="168">Palestinian Territory Occupied</option>
<option value="169">Panama</option>
<option value="170">Papua new Guinea</option>
<option value="171">Paraguay</option>
<option value="172">Peru</option>
<option value="173">Philippines</option>
<option value="174">Pitcairn Island</option>
<option value="175">Poland</option>
<option value="176">Portugal</option>
<option value="177">Puerto Rico</option>
<option value="178">Qatar</option>
<option value="179">Reunion</option>
<option value="180">Romania</option>
<option value="181">Russia</option>
<option value="182">Rwanda</option>
<option value="183">Saint Helena</option>
<option value="184">Saint Kitts And Nevis</option>
<option value="185">Saint Lucia</option>
<option value="186">Saint Pierre and Miquelon</option>
<option value="187">Saint Vincent And The Grenadines</option>
<option value="188">Samoa</option>
<option value="189">San Marino</option>
<option value="190">Sao Tome and Principe</option>
<option value="191">Saudi Arabia</option>
<option value="192">Senegal</option>
<option value="193">Serbia</option>
<option value="194">Seychelles</option>
<option value="195">Sierra Leone</option>
<option value="196">Singapore</option>
<option value="197">Slovakia</option>
<option value="198">Slovenia</option>
<option value="199">Smaller Territories of the UK</option>
<option value="200">Solomon Islands</option>
<option value="201">Somalia</option>
<option value="202">South Africa</option>
<option value="203">South Georgia</option>
<option value="204">South Sudan</option>
<option value="205">Spain</option>
<option value="206">Sri Lanka</option>
<option value="207">Sudan</option>
<option value="208">Suriname</option>
<option value="209">Svalbard And Jan Mayen Islands</option>
<option value="210">Swaziland</option>
<option value="211">Sweden</option>
<option value="212">Switzerland</option>
<option value="213">Syria</option>
<option value="214">Taiwan</option>
<option value="215">Tajikistan</option>
<option value="216">Tanzania</option>
<option value="217">Thailand</option>
<option value="218">Togo</option>
<option value="219">Tokelau</option>
<option value="220">Tonga</option>
<option value="221">Trinidad And Tobago</option>
<option value="222">Tunisia</option>
<option value="223">Turkey</option>
<option value="224">Turkmenistan</option>
<option value="225">Turks And Caicos Islands</option>
<option value="226">Tuvalu</option>
<option value="227">Uganda</option>
<option value="228">Ukraine</option>
<option value="229">United Arab Emirates</option>
<option value="230">United Kingdom</option>
<option value="231">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="233">Uruguay</option>
<option value="234">Uzbekistan</option>
<option value="235">Vanuatu</option>
<option value="236">Vatican City State (Holy See)</option>
<option value="237">Venezuela</option>
<option value="238">Vietnam</option>
<option value="239">Virgin Islands (British)</option>
<option value="240">Virgin Islands (US)</option>
<option value="241">Wallis And Futuna Islands</option>
<option value="242">Western Sahara</option>
<option value="243">Yemen</option>
<option value="244">Yugoslavia</option>
<option value="245">Zambia</option>
<option value="246">Zimbabwe</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Course Interest</label>
<div class="btn-group btn-group-sm mb-2 w-100" role="group">
<input type="radio" class="btn-check" name="course_type" id="layoutMentorCourseRadio" value="course" autocomplete="off" checked>
<label class="btn btn-outline-brand m-0" for="layoutMentorCourseRadio" style="font-size:0.85rem;">Courses</label>
<input type="radio" class="btn-check" name="course_type" id="layoutMentorBootcampRadio" value="bootcamp" autocomplete="off">
<label class="btn btn-outline-brand m-0" for="layoutMentorBootcampRadio" style="font-size:0.85rem;">Career Programs</label>
</div>
<select class="form-control ja-select2" name="course" id="layoutMentorCourseSelect" data-placeholder="Select Course" required>
<option value="0" selected disabled>Select Course</option>
<option value="1">HTML Training</option>
<option value="2">Android App Development</option>
<option value="3">Manual Training</option>
<option value="4">Adobe Training</option>
<option value="5">Digital Marketing</option>
<option value="6">Core Java Training</option>
<option value="7">CSS Training</option>
<option value="8">Bootstrap Training</option>
<option value="9">Javascript Training</option>
<option value="10">React JS Training</option>
<option value="11">Node JS Training</option>
<option value="12">Angular Training</option>
<option value="13">Django Training</option>
<option value="14">PHP Training</option>
<option value="16">Laravel Training</option>
<option value="17">Codeignitor Training</option>
<option value="18">Wordpress Training</option>
<option value="19">jQuery Training</option>
<option value="20">IOS Training</option>
<option value="21">Flutter Training</option>
<option value="22">Ionic Training</option>
<option value="23">React Native Training</option>
<option value="24">Augmented Reality Training</option>
<option value="25">Advance Java Training</option>
<option value="26">Selenium Training</option>
<option value="27">Performance Training</option>
<option value="28">Photoshop Training</option>
<option value="29">Illustrator Training</option>
<option value="30">Figma Training</option>
<option value="31">SEO Training</option>
<option value="379">SAP ABAP Training</option>
<option value="382">Microsoft Azure Training</option>
<option value="392">ASP .NET Training</option>
<option value="400">SAP ABAP On HANA Training</option>
<option value="429">SAP FIORI Training</option>
<option value="459">SAP MM Training</option>
<option value="461">SAP SD Training</option>
<option value="508">PMP Certification Training</option>
<option value="521">PMI® Agile Certified Practitioner Training</option>
<option value="522">Python Training</option>
<option value="523">Machine Learning</option>
<option value="528">Microsoft Power BI Training</option>
<option value="538">Tableau Training</option>
<option value="569">Alteryx Training</option>
<option value="572">MySQL Training</option>
<option value="585">SalesForce Training</option>
<option value="634">Mobile App Testing Using Appium Training</option>
<option value="635">Continuous Testing in DevOps Training</option>
<option value="636">AWS Training</option>
<option value="637">Deep Learning</option>
<option value="638">DevOps Training</option>
<option value="640">Certified Scrum Master® (CSM) Certification Training</option>
<option value="641">PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642">GCP Certification Training</option>
<option value="23220">Advanced Excel & Power BI</option>
<option value="23221">Power BI and SQL</option>
<option value="23222">Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
</select>
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Preferred Date & Time</label>
<input type="datetime-local" name="preferred_datetime" class="form-control" required />
</div>
<div class="form-group mb-3 col-lg-12">
<label class="form-label">Your message</label>
<textarea class="form-control" name="description" rows="3" placeholder="Your message" required></textarea>
</div>
<div class="mb-3 col-sm-12">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"></div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-primary w-100" value="Book Session" />
</div>
</div>
</form>
<script>
document.getElementById('layoutMentorCourseRadio').addEventListener('change', function() { if (this.checked) window.loadCourseTypeOptions('course', '#layoutMentorCourseSelect'); });
document.getElementById('layoutMentorBootcampRadio').addEventListener('change', function() { if (this.checked) window.loadCourseTypeOptions('bootcamp', '#layoutMentorCourseSelect'); });
</script>
</div>
</div>
</div>
</div>
<!--=================================
Back To Top -->
<!--=================================
Javascript -->
<!-- JS Global Compulsory (Critical path) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<!-- Custom Template Scripts (must run before inline code) -->
<script src="https://www.justacademy.co/js/custom.js?v=1"></script>
<script src="https://www.justacademy.co/js/custom2.js?v=1"></script>
<!-- Page JS Implementing Plugins (Deferred - non-critical) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" defer></script>
<script src="https://www.justacademy.co/js/counter/jquery.countTo.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" defer></script>
<script src="https://www.justacademy.co/js/swiperanimation/SwiperAnimation.min.js" defer></script>
<script src="https://www.justacademy.co/js/shuffle/shuffle.min.js" defer></script>
<script src="https://www.justacademy.co/js/jarallax/jarallax.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" defer></script>
<script src="https://www.justacademy.co/js/jquery.appear.js" defer></script>
<!-- Global Error Handling -->
<!-- Template Scripts (Do not remove)-->
<script src="https://www.justacademy.co/js/custom.js?v=1" defer></script>
<script src="https://www.justacademy.co/js/custom2.js?v=1" defer></script>
<script>
function openMentorModal() {
$('#mentorSessionModal').modal('show');
}
window.loadCourseTypeOptions = function(type, selectEl) {
var url = type === 'bootcamp' ? '/api/homepage/bootcamps' : '/api/homepage/courses';
var label = type === 'bootcamp' ? 'Career Program' : 'Course';
var $sel = $(selectEl);
$sel.empty().append('<option value="" selected disabled>Loading...</option>');
if (typeof $.fn.select2 !== 'undefined' && $sel.data('select2')) $sel.trigger('change.select2');
$.get(url, function(resp) {
$sel.empty().append('<option value="" selected disabled>Select ' + label + '</option>');
(resp.data || []).forEach(function(item) { $sel.append(new Option(item.name, item.id)); });
if (typeof $.fn.select2 !== 'undefined' && $sel.data('select2')) $sel.trigger('change.select2');
});
};
</script>
<script type="text/javascript">
$("document").ready(function() {
setTimeout(function() {
$("div.alert").remove();
}, 5000);
});
</script>
<script>
// Countdown function for timers
function countDown(endDate, elementId) {
if (!endDate) {
document.getElementById(elementId).innerHTML = "Offer Expired";
return;
}
var timer = setInterval(function() {
var now = new Date().getTime();
var endTime = new Date(endDate).getTime();
var distance = endTime - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(elementId).innerHTML = "Offer Expired";
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var timeString = "";
if (days > 0) {
timeString += days + "d ";
}
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
document.getElementById(elementId).innerHTML = timeString;
}, 1000);
}
// Search overlay functionality - Version 2024-08-23-v3 - FINAL DB ONLY
window.addEventListener('load', function() {
var offer = [];
if (offer.length > 0) {
countDown(offer[0].last_date, 'timer');
// Show header offer banner with animation
setTimeout(function() {
$('#header-offer').addClass('show');
}, 2000); // Show banner after 2 seconds
} else {
// No offers available, hide timer elements
if (document.getElementById('timer')) {
document.getElementById('timer').innerHTML = "No active offers";
}
}
});
// Check if the session variable is set
var popupShown = sessionStorage.getItem('popupShown');
var showPopupFromPHP = true; // Respect PHP popup logic
// Reset popup session daily
var lastResetDate = localStorage.getItem('lastResetDate');
var today = new Date().toDateString();
if (lastResetDate !== today) {
// Reset popup session for new day
sessionStorage.removeItem('popupShown');
localStorage.setItem('lastResetDate', today);
popupShown = null;
}
// Popup will only show when user clicks "GRAB NOW" - no automatic popup
// The modal is triggered manually by the .grab-now-link click event
// Search functionality
$(document).ready(function() {
const searchTrigger = $('#searchTrigger');
const searchTriggerMobile = $('#searchTriggerMobile');
const searchOverlay = $('#searchOverlay');
const searchClose = $('#searchClose');
const searchInputFullscreen = $('#courseSearchFullscreen');
// Store original body overflow state
var originalBodyOverflow = $('body').css('overflow');
// Open full-screen search (desktop)
searchTrigger.on('click', function() {
searchOverlay.fadeIn(300);
searchInputFullscreen.focus();
$('body').css('overflow', 'hidden'); // Prevent background scrolling
// Load search suggestions
loadSearchSuggestions();
});
// Open full-screen search (mobile)
searchTriggerMobile.on('click', function() {
searchOverlay.fadeIn(300);
searchInputFullscreen.focus();
$('body').css('overflow', 'hidden'); // Prevent background scrolling
// Load search suggestions
loadSearchSuggestions();
});
// Close full-screen search
searchClose.on('click', function() {
// Clear any pending search timeout
if (searchTimeout) {
clearTimeout(searchTimeout);
searchTimeout = null;
}
// Reset search input
searchInputFullscreen.val('');
// Show left sidebar
$('#leftSidebarSection').show();
// Return right column to normal width
$('#rightColumnSection').removeClass('col-lg-12').addClass('col-lg-8');
// Reset to original layout and title
$('.search-section-fullscreen h6').text('Popular Courses');
// Display default courses
if (allCoursesData.length > 0) {
displayDefaultCourses(allCoursesData);
} else {
// No fallback - if no admin-managed courses, hide the section
$('#rightColumnSection').hide();
}
// Close overlay
searchOverlay.fadeOut(300);
$('body').css('overflow', originalBodyOverflow); // Restore original scroll state
});
// Close on escape key
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && searchOverlay.is(':visible')) {
searchClose.click();
}
});
// Close when clicking on overlay background
searchOverlay.on('click', function(e) {
if (e.target === this) {
searchClose.click();
}
});
// Global variable to store courses data
let allCoursesData = [];
let searchTimeout = null;
// Load courses data on page load - DISABLED to use only search_index popular courses
// loadCoursesData('');
// Load search suggestions on page load
loadSearchSuggestions();
function loadSearchSuggestions() {
// Add cache-busting parameter
const cacheKey = Date.now();
$.get("https://www.justacademy.co/api/search-suggestions" + "?_=" + cacheKey, function(response) {
if (response.success) {
// Load popular searches
const popularSearchesList = $('#popularSearchesList');
popularSearchesList.empty();
if (response.popular_searches && response.popular_searches.length > 0) {
response.popular_searches.forEach(function(search) {
popularSearchesList.append(`
<a href="javascript:void(0)" class="search-item-fullscreen">${search.text}</a>
`);
});
}
// Load popular categories
const popularCategoriesList = $('#popularCategoriesList');
popularCategoriesList.empty();
if (response.popular_categories && response.popular_categories.length > 0) {
response.popular_categories.forEach(function(category) {
popularCategoriesList.append(`
<span class="category-tag-fullscreen">${category.text}</span>
`);
});
}
// Load popular courses from database (new implementation)
if (response.popular_courses && response.popular_courses.length > 0) {
allCoursesData = response.popular_courses;
displayDefaultCourses(response.popular_courses);
// Show the popular courses section
$('#rightColumnSection').show();
} else {
// Hide the entire popular courses section if no admin-managed courses found
$('#rightColumnSection').hide();
allCoursesData = [];
}
} else {
// API response not successful
}
}).fail(function(xhr, status, error) {
// Failed to load search suggestions
// No fallback - if API fails, don't show anything
const popularSearchesList = $('#popularSearchesList');
const popularCategoriesList = $('#popularCategoriesList');
popularSearchesList.empty();
popularCategoriesList.empty();
// Hide popular courses section on API failure
$('#rightColumnSection').hide();
allCoursesData = [];
});
}
function loadCoursesData(searchTerm = '') {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "https://www.justacademy.co/search/" + encodeURIComponent(searchTerm || 'all'),
type: 'POST',
success: function(response) {
if (response.success) {
allCoursesData = response.courses;
if (searchTerm) {
displaySearchResults(response.courses, searchTerm);
} else {
displayDefaultCourses(response.courses);
}
}
},
error: function(xhr, status, error) {
displayError('Search failed. Please try again.');
}
});
}
function displaySearchResults(courses, searchTerm) {
// Change title to "Search Results"
$('.search-title').text('Search Results');
let coursesHTML = '';
if (courses.length > 0) {
// Show search results in flexible grid
coursesHTML = '<div class="d-flex flex-wrap gap-3 justify-content-start">';
courses.forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
coursesHTML += '</div>';
} else {
// Show "Course Not found" with popular courses as recommendations
$('.search-title').text('Course Not found');
coursesHTML = `
<div class="text-center mb-4">
<p class="text-muted mb-3">No courses found matching "${searchTerm}". Here are some popular courses you might like:</p>
</div>
<div class="d-flex flex-wrap gap-3 justify-content-start">`;
// Show all courses as recommendations
allCoursesData.slice(0, 6).forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
coursesHTML += '</div>';
}
$('#coursesGrid').html(coursesHTML);
}
function displayDefaultCourses(courses) {
$('.search-title').text('Popular Courses');
let coursesHTML = '';
courses.slice(0, 4).forEach((course, index) => {
const isAuthorized = course.name.includes('PMP') ?
'<div style="background-color: #ff6b35; color: white; padding: 10px; text-align: center; font-size: 12px; font-weight: bold;">Authorized Training Provider</div>' :
`<img src="${course.image}" alt="${course.image_alt}" class="course-image-fullscreen">`;
// Limit description to 3 lines (approximately 100 characters)
const limitedDescription = course.description.length > 100 ?
course.description.substring(0, 100) + '...' :
course.description;
coursesHTML += `
<div class="course-card-fullscreen" style="flex: 1 1 300px; min-width: 280px; max-width: 350px;">
${isAuthorized}
<div class="course-info-fullscreen">
<h6>${course.name}</h6>
<p class="course-description-fullscreen" style="color: #666; font-size: 14px; line-height: 1.4; margin-bottom: 15px;">${limitedDescription}</p>
<a href="${course.url}" class="know-more-btn">
KNOW MORE <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
});
$('#coursesGrid').html(coursesHTML);
}
function displayError(message) {
$('#coursesGrid').html(`<div class="text-center col-12"><p class="text-danger">${message}</p></div>`);
}
// Search functionality in fullscreen
searchInputFullscreen.on('input', function() {
const searchTerm = $(this).val().trim();
// Clear previous timeout
if (searchTimeout) {
clearTimeout(searchTimeout);
}
if (searchTerm.length > 0) {
// Hide left sidebar (categories + searches) when searching
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Debounce search requests
searchTimeout = setTimeout(() => {
loadCoursesData(searchTerm);
}, 100);
} else {
// Show left sidebar when search is empty
$('#leftSidebarSection').show();
// Return right column to normal width
$('#rightColumnSection').removeClass('col-lg-12').addClass('col-lg-8');
// Reset to original layout and title
$('.search-title').text('Popular Courses');
// Display default courses
if (allCoursesData.length > 0) {
displayDefaultCourses(allCoursesData);
} else {
// No fallback - if no admin-managed courses, hide the section
$('#rightColumnSection').hide();
}
}
});
// Handle clicks on popular search items
$(document).on('click', '.search-item-fullscreen', function(e) {
e.preventDefault();
const searchTerm = $(this).text().trim();
// Set the search input value
searchInputFullscreen.val(searchTerm);
// Hide left sidebar
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Trigger search
loadCoursesData(searchTerm);
});
// Handle clicks on popular category tags
$(document).on('click', '.category-tag-fullscreen', function(e) {
e.preventDefault();
const categoryTerm = $(this).text().trim();
// Set the search input value
searchInputFullscreen.val(categoryTerm);
// Hide left sidebar
$('#leftSidebarSection').hide();
// Expand right column to full width when searching
$('#rightColumnSection').removeClass('col-lg-8').addClass('col-lg-12');
// Trigger search
loadCoursesData(categoryTerm);
});
});
// Offer Carousel Management
$(document).ready(function() {
const carousel = $('#offer-carousel');
const slides = $('.offer-slide');
const indicators = $('.indicator');
const totalSlides = slides.length;
let currentSlide = 0;
let carouselInterval;
let isCarouselPaused = false;
let timerIntervals = {};
// Check for closed offers from localStorage
function getClosedOffers() {
const today = new Date().toDateString();
const stored = localStorage.getItem('closedOffers_' + today);
return stored ? JSON.parse(stored) : [];
}
// Save closed offer to localStorage
function saveClosedOffer(offerId) {
const today = new Date().toDateString();
let closedOffers = getClosedOffers();
if (!closedOffers.includes(offerId)) {
closedOffers.push(offerId);
localStorage.setItem('closedOffers_' + today, JSON.stringify(closedOffers));
}
}
// Hide closed offers
function hideClosedOffers() {
const closedOffers = getClosedOffers();
closedOffers.forEach(function(offerId) {
$(`[data-offer-id="${offerId}"]`).hide();
});
// Update visible slides
updateVisibleSlides();
}
// Update visible slides and reset carousel
function updateVisibleSlides() {
const visibleSlides = $('.offer-slide:visible');
const visibleIndicators = $('.indicator');
if (visibleSlides.length === 0) {
$('#offer-carousel-container').hide();
return;
}
// Hide indicators if only one or no visible slides
if (visibleSlides.length <= 1) {
$('.carousel-indicators').hide();
stopCarousel(); // Stop auto-scrolling when only one offer
} else {
$('.carousel-indicators').show();
// Update indicators to match visible slides
visibleIndicators.each(function() {
const indicatorIndex = $(this).data('index');
const correspondingSlide = $(`.offer-slide[data-index="${indicatorIndex}"]`);
if (correspondingSlide.is(':visible')) {
$(this).show();
} else {
$(this).hide();
}
});
// Restart carousel if stopped
if (!carouselInterval) {
startCarousel();
}
}
// Reset current slide if it's hidden
if (!slides.eq(currentSlide).is(':visible')) {
currentSlide = 0;
// Find first visible slide
visibleSlides.each(function(index) {
const slideIndex = $(this).data('index');
if (slideIndex !== undefined) {
currentSlide = slideIndex;
return false;
}
});
}
updateCarousel();
updateIndicators();
}
// Initialize offer timers
function initTimers() {
const offerData = [];
offerData.forEach(function(offer) {
if (offer.last_date) {
startTimer(offer.id, offer.last_date);
}
});
}
// Start countdown timer for specific offer
function startTimer(offerId, lastDate) {
const timerElements = $(`.offer-timer[data-offer-id="${offerId}"]`);
timerIntervals[offerId] = setInterval(function() {
const now = new Date().getTime();
const endTime = new Date(lastDate).getTime();
const distance = endTime - now;
if (distance < 0) {
timerElements.text("EXPIRED");
clearInterval(timerIntervals[offerId]);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let timeString = "";
if (days > 0) timeString += days + "d ";
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
timerElements.text(timeString);
}, 1000);
}
// Update carousel position
function updateCarousel() {
const visibleSlides = $('.offer-slide:visible');
if (visibleSlides.length === 0) return;
// Find the index of the current visible slide
let actualIndex = 0;
visibleSlides.each(function(index) {
if ($(this).data('index') === currentSlide) {
actualIndex = index;
return false;
}
});
const translateX = -actualIndex * 100;
carousel.css('transform', `translateX(${translateX}%)`);
}
// Update indicators
function updateIndicators() {
indicators.removeClass('active').css('background', 'rgba(255,255,255,0.6)');
$(`.indicator[data-index="${currentSlide}"]`).addClass('active').css('background', 'rgba(255,255,255,1)');
}
// Next slide
function nextSlide() {
const visibleSlides = $('.offer-slide:visible');
if (visibleSlides.length <= 1) return;
let found = false;
for (let i = currentSlide + 1; i < totalSlides; i++) {
if ($(`[data-index="${i}"]`).is(':visible')) {
currentSlide = i;
found = true;
break;
}
}
if (!found) {
// Go to first visible slide
visibleSlides.each(function() {
const slideIndex = $(this).data('index');
if (slideIndex !== undefined) {
currentSlide = slideIndex;
return false;
}
});
}
updateCarousel();
updateIndicators();
}
// Start automatic carousel
function startCarousel() {
if (isCarouselPaused) return;
carouselInterval = setInterval(function() {
if (!isCarouselPaused && $('.offer-slide:visible').length > 1) {
nextSlide();
}
}, 10000); // 10 seconds
}
// Stop carousel
function stopCarousel() {
clearInterval(carouselInterval);
}
// Pause carousel
function pauseCarousel() {
isCarouselPaused = true;
stopCarousel();
}
// Resume carousel
function resumeCarousel() {
isCarouselPaused = false;
startCarousel();
}
// Update modal content based on current offer
function updateModalContent() {
const currentOfferSlide = $(`.offer-slide[data-index="${currentSlide}"]`);
if (currentOfferSlide.length) {
const offerId = currentOfferSlide.data('offer-id');
const offerData = [];
const currentOffer = offerData.find(o => o.id == offerId);
if (currentOffer) {
let offerText = '';
if (currentOffer.offer) offerText += currentOffer.offer;
if (currentOffer.course_id && currentOffer.course) {
offerText += ' | ' + currentOffer.course.name;
}
$('#current-offer-text').html('<b>' + offerText + '</b>');
$('#modal-timer').attr('data-offer-id', offerId).addClass('offer-timer');
// Auto-select course if available in offer and hide dropdown
if (currentOffer.course_id) {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
if (courseSelect.length) {
courseSelect.val(currentOffer.course_id);
// Hide the course selection dropdown
courseFormGroup.hide();
// Trigger change event for selectpicker if used
if (courseSelect.hasClass('ja-select2')) {
courseSelect.trigger('change');
}
}
} else {
// Show course dropdown if no course_id in offer
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
}
// Start timer for modal if not already started
if (currentOffer.last_date && !timerIntervals[offerId + '_modal']) {
startModalTimer(offerId, currentOffer.last_date);
}
}
}
}
// Start modal timer
function startModalTimer(offerId, lastDate) {
const modalTimer = $('#modal-timer');
timerIntervals[offerId + '_modal'] = setInterval(function() {
const now = new Date().getTime();
const endTime = new Date(lastDate).getTime();
const distance = endTime - now;
if (distance < 0) {
modalTimer.text("EXPIRED");
clearInterval(timerIntervals[offerId + '_modal']);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let timeString = "";
if (days > 0) timeString += days + "d ";
timeString += hours.toString().padStart(2, '0') + "h " +
minutes.toString().padStart(2, '0') + "m " +
seconds.toString().padStart(2, '0') + "s";
modalTimer.text(timeString);
}, 1000);
}
// Event Handlers
// Close individual offer
$(document).on('click', '.offer-close-btn', function(e) {
e.preventDefault();
e.stopPropagation();
const offerId = $(this).data('offer-id');
saveClosedOffer(offerId);
$(`[data-offer-id="${offerId}"]`).fadeOut(300, function() {
updateVisibleSlides();
});
});
// Grab now clicked - pause carousel
$(document).on('click', '.grab-now-link', function() {
pauseCarousel();
updateModalContent();
// Auto-select course if there's a single offer available
const offerData = [];
if (offerData.length > 0 && offerData[0].course_id) {
setTimeout(function() {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
if (courseSelect.length) {
courseSelect.val(offerData[0].course_id);
// Hide the course selection dropdown
courseFormGroup.hide();
// Trigger change event for selectpicker if used
if (courseSelect.hasClass('selectpicker')) {
courseSelect.selectpicker('refresh');
}
}
}, 300); // Small delay to ensure modal is fully loaded
} else if (offerData.length > 0) {
// Show course dropdown if no course_id in offer
setTimeout(function() {
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
}, 300);
}
});
// Modal closed - resume carousel
$(document).on('hidden.bs.modal', '#courseOffer', function() {
resumeCarousel();
// Reset course dropdown visibility for next time
const courseSelect = $('#courseOffer select[name="course"]');
const courseFormGroup = courseSelect.closest('.form-group');
courseFormGroup.show();
courseSelect.val('0'); // Reset to default
if (courseSelect.hasClass('selectpicker')) {
courseSelect.selectpicker('refresh');
}
});
// Form submitted - resume carousel after delay
$(document).on('submit', '#courseOffer form', function() {
setTimeout(function() {
resumeCarousel();
}, 2000);
});
// Indicator clicked
$(document).on('click', '.indicator', function() {
const targetIndex = parseInt($(this).data('index'));
if ($(`[data-index="${targetIndex}"]`).is(':visible')) {
currentSlide = targetIndex;
updateCarousel();
updateIndicators();
// Restart carousel timer
stopCarousel();
startCarousel();
}
});
// Initialize
hideClosedOffers();
initTimers();
// Check if we need indicators after hiding closed offers
const initialVisibleSlides = $('.offer-slide:visible');
if (initialVisibleSlides.length <= 1) {
$('.carousel-indicators').hide();
} else {
$('.carousel-indicators').show();
}
updateCarousel();
updateIndicators();
// Only start carousel if there are multiple visible offers
if (initialVisibleSlides.length > 1) {
startCarousel();
}
});
</script>
<script>
$(document).ready(function() {
// Want To Connect Modal Auto-Show Logic
const MODAL_DELAY = 30 * 60 * 1000; // 30 minutes in milliseconds
const STORAGE_KEY = 'wantToConnect_lastClosed'; // Unique key for this modal only
let nextModalTimer = null;
// Clear any old storage keys that might conflict
function clearOldStorageKeys() {
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.includes('popup') && key !== STORAGE_KEY) {
keysToRemove.push(key);
}
}
keysToRemove.forEach(key => {
localStorage.removeItem(key);
});
}
function showPopupModal() {
const modalElement = document.getElementById('popupModal');
if (modalElement) {
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
bootstrap.Modal.getOrCreateInstance(modalElement).show();
} else if (typeof $ !== 'undefined' && $.fn.modal) {
$('#popupModal').modal('show');
}
}
}
function setModalClosedTime() {
const timestamp = Date.now().toString();
localStorage.setItem(STORAGE_KEY, timestamp);
}
function shouldShowModal() {
const lastClosed = localStorage.getItem(STORAGE_KEY);
if (!lastClosed) {
return true; // Never been closed, show it
}
const timeSinceLastClose = Date.now() - parseInt(lastClosed);
const shouldShow = timeSinceLastClose >= MODAL_DELAY;
return shouldShow;
}
function scheduleNextModal() {
const lastClosed = localStorage.getItem(STORAGE_KEY);
if (!lastClosed) return;
const timeSinceLastClose = Date.now() - parseInt(lastClosed);
const timeUntilNext = MODAL_DELAY - timeSinceLastClose;
clearTimeout(nextModalTimer);
if (timeUntilNext > 0) {
nextModalTimer = setTimeout(showPopupModal, timeUntilNext);
} else {
showPopupModal();
}
}
// Clear old storage that might interfere
clearOldStorageKeys();
// Single close listener — fires after modal fully hidden and backdrop cleanly removed
$(document).on('hidden.bs.modal', '#popupModal', function() {
setModalClosedTime();
clearTimeout(nextModalTimer);
nextModalTimer = setTimeout(showPopupModal, MODAL_DELAY);
});
// Check if modal should be shown on page load
if (shouldShowModal()) {
// Show modal after 15 seconds to allow users to view page content first
setTimeout(function() {
showPopupModal();
}, 10000); // 10 seconds delay to ensure everything is loaded
} else {
// Schedule the next show based on when it was last closed
scheduleNextModal();
}
});
// Drop Query Form JavaScript
$(document).ready(function() {
const dropQueryContainer = $('#dropQueryContainer');
const dropQueryToggle = $('#dropQueryToggle');
const dropQueryForm = $('#dropQueryForm');
const toggleIcon = $('.toggle-icon');
// Resets the drop-query recaptcha by finding its widget index at call-time.
// Called after any AJAX response so the consumed token is cleared.
function resetDropQueryCaptcha() {
try {
if (typeof grecaptcha === 'undefined') return;
var divs = document.querySelectorAll('.g-recaptcha');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id === 'drop-query-recaptcha') {
grecaptcha.reset(i);
return;
}
}
} catch(e) {}
}
// Initialize Select2 for country dropdown
if (typeof $.fn.select2 !== 'undefined') {
$('#countrySelect').select2({
placeholder: "Select Country",
allowClear: false,
width: '100%',
dropdownParent: $('#dropQueryContainer'),
templateResult: function(option) {
if (!option.id) {
return option.text;
}
return $('<span>' + option.text + '</span>');
},
templateSelection: function(option) {
if (!option.id) {
return option.text;
}
return option.text;
}
});
// Global init for all .ja-select2 elements (bootstrap-select replacement)
$('.ja-select2').each(function() {
var $this = $(this);
var $modal = $this.closest('.modal');
var inPhoneGroup = $this.closest('.search_select_box').length > 0;
var options = {
placeholder: $this.attr('data-placeholder') || 'Select',
allowClear: false,
width: '100%',
};
if ($modal.length) {
options.dropdownParent = $modal;
}
// Phone input group: show abbr when selected, full name in dropdown
if (inPhoneGroup) {
options.dropdownAutoWidth = true;
options.templateResult = function(opt) {
if (!opt.id) return opt.text;
return $(opt.element).attr('data-full') || opt.text;
};
options.templateSelection = function(opt) {
if (!opt.id) return opt.text;
return $(opt.element).attr('data-abbr') || opt.text;
};
}
$this.select2(options);
// Tag container so CSS can target it
if ($this.data('select2') && $this.data('select2').$container) {
$this.data('select2').$container.addClass('ja-select2-container');
}
});
}
// Check localStorage for user preference
const isCollapsed = localStorage.getItem('dropQueryCollapsed') === 'true';
// Start with collapsed state initially (hide on page load)
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
// Ensure body scroll is enabled when page loads
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
// Do NOT auto-expand Drop Query form on page load
// This was causing scroll to freeze after 5 seconds
// Users can click the toggle button to expand manually
// Toggle functionality
dropQueryToggle.on('click', function() {
const isCurrentlyCollapsed = dropQueryContainer.hasClass('collapsed');
if (isCurrentlyCollapsed) {
// Expand
dropQueryContainer.removeClass('collapsed');
dropQueryForm.addClass('expanded');
dropQueryToggle.addClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'false');
// Prevent body scroll on mobile when expanded
if ($(window).width() <= 768) {
$('body').addClass('modal-open');
}
} else {
// Collapse
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'true');
// Restore body scroll on mobile when collapsed
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
}
});
// Form submission handling
$('#dropQueryFormSubmit .btn-submit-query').on('click', function(e) {
e.preventDefault();
const recaptchaToken = $('#dropQueryFormSubmit textarea[name="g-recaptcha-response"]').val();
if (!recaptchaToken) {
showCustomNotification('Please complete the reCAPTCHA verification.', 'danger');
return false;
}
const submitBtn = $(this);
const originalText = submitBtn.text();
submitBtn.text('SUBMITTING...').prop('disabled', true);
$.ajax({
url: 'https://www.justacademy.co/enquiry',
method: 'POST',
data: {
_token: 'ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu',
description: $('#dropQueryFormSubmit textarea[name="description"]').val(),
phone: $('#dropQueryFormSubmit input[name="phone"]').val(),
email: $('#dropQueryFormSubmit input[name="email"]').val(),
country_id: $('#dropQueryFormSubmit select[name="country_id"]').val(),
form_id: 'drop_query_global',
source_url: window.location.href,
'g-recaptcha-response': recaptchaToken
},
success: function(response) {
// Success - collapse the form and show success message
dropQueryContainer.addClass('collapsed');
dropQueryForm.removeClass('expanded');
dropQueryToggle.removeClass('expanded');
localStorage.setItem('dropQueryCollapsed', 'true');
// Reset form
$('#dropQueryFormSubmit')[0].reset();
// Reset the reCAPTCHA widget
resetDropQueryCaptcha();
// Show success notification
showCustomNotification(response.message || 'Your query has been submitted successfully! We will contact you soon.', 'success');
// Restore body scroll on mobile
if ($(window).width() <= 768) {
$('body').removeClass('modal-open');
}
},
error: function(xhr) {
// Show error notification
let errorMessage = 'Something went wrong. Please try again.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
showCustomNotification(errorMessage, 'error');
// Token was consumed server-side; reset widget so user can re-verify
resetDropQueryCaptcha();
},
complete: function() {
// Reset button state
submitBtn.text(originalText).prop('disabled', false);
}
});
});
// Add source URL to form submission
$('#dropQueryFormSubmit input[name="source_url"]').val(window.location.href);
// Handle window resize to manage body scroll on mobile
$(window).on('resize', function() {
const isMobile = $(window).width() <= 768;
const isExpanded = !dropQueryContainer.hasClass('collapsed');
if (isMobile && isExpanded) {
$('body').addClass('modal-open');
} else {
$('body').removeClass('modal-open');
}
});
});
// Mobile Query Button Function - Uses Desktop Drop Query
window.toggleMobileQuery = function() {
const dropQueryContainer = $('#dropQueryContainer');
const isCurrentlyCollapsed = dropQueryContainer.hasClass('collapsed');
if (isCurrentlyCollapsed) {
// Show and expand the query form
dropQueryContainer.show();
dropQueryContainer.removeClass('collapsed');
dropQueryContainer.addClass('expanded');
$('#dropQueryToggle').addClass('expanded');
$('#dropQueryForm').addClass('expanded');
// For mobile, make it full screen
if (window.innerWidth <= 768) {
$('body').addClass('modal-open');
}
} else {
// Collapse and hide the query form
dropQueryContainer.addClass('collapsed');
dropQueryContainer.removeClass('expanded');
$('#dropQueryToggle').removeClass('expanded');
$('#dropQueryForm').removeClass('expanded');
$('body').removeClass('modal-open');
// Hide after animation on mobile
if (window.innerWidth <= 768) {
setTimeout(() => {
dropQueryContainer.hide();
}, 400);
}
}
};
// Initialize drop query container as collapsed/hidden on mobile
$(document).ready(function() {
if (window.innerWidth <= 768) {
const dropQueryContainer = $('#dropQueryContainer');
dropQueryContainer.addClass('collapsed');
dropQueryContainer.hide();
}
});
// Custom notification function (replaces browser alerts) - GLOBAL FUNCTION
window.showCustomNotification = function(message, type = 'info') {
// Remove existing notifications
$('.custom-notification').remove();
const notificationClass = type === 'success' ? 'alert-success' :
type === 'error' ? 'alert-danger' : 'alert-info';
const notification = $(`
<div class="custom-notification alert ${notificationClass} alert-dismissible fade show" style="
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 8px;
">
<strong>${type === 'success' ? 'Success!' : type === 'error' ? 'Error!' : 'Info!'}</strong>
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
`);
$('body').append(notification);
// Auto dismiss after 5 seconds
setTimeout(function() {
notification.fadeOut(500, function() {
$(this).remove();
});
}, 5000);
};
</script>
<!-- Book Free Demo Modal -->
<div class="modal fade" id="bookFreeDemoModal" tabindex="-1" role="dialog" aria-labelledby="bookFreeDemoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h4 class="modal-title text-white" id="bookFreeDemoModalLabel">
Book Your Free Live Demo
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form id="bookFreeDemoForm" method="POST" action="https://www.justacademy.co/demo-enquiry-form">
<input type="hidden" name="_token" value="ZctBaBWGHTUpdCgCux7i2iVlXRhx2GTn9LXoZcKu" autocomplete="off">
<div class="row">
<div class="col-md-6 mb-3">
<label for="demo_name" class="form-label">Full Name *</label>
<input type="text" class="form-control" id="demo_name" name="name"
placeholder="Enter your full name" maxlength="30" required>
</div>
<div class="col-md-6 mb-3">
<label for="demo_email" class="form-label">Email Address *</label>
<input type="email" class="form-control" id="demo_email" name="email"
placeholder="Enter your email" maxlength="50" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="demo_country" class="form-label">Country *</label>
<select name="country_id" id="demo_country" class="form-control select2" required>
<option value="">Select Country</option>
<option value="1" >
Afghanistan
</option>
<option value="2" >
Albania
</option>
<option value="3" >
Algeria
</option>
<option value="4" >
American Samoa
</option>
<option value="5" >
Andorra
</option>
<option value="6" >
Angola
</option>
<option value="7" >
Anguilla
</option>
<option value="8" >
Antarctica
</option>
<option value="9" >
Antigua And Barbuda
</option>
<option value="10" >
Argentina
</option>
<option value="11" >
Armenia
</option>
<option value="12" >
Aruba
</option>
<option value="13" >
Australia
</option>
<option value="14" >
Austria
</option>
<option value="15" >
Azerbaijan
</option>
<option value="16" >
Bahamas The
</option>
<option value="17" >
Bahrain
</option>
<option value="18" >
Bangladesh
</option>
<option value="19" >
Barbados
</option>
<option value="20" >
Belarus
</option>
<option value="21" >
Belgium
</option>
<option value="22" >
Belize
</option>
<option value="23" >
Benin
</option>
<option value="24" >
Bermuda
</option>
<option value="25" >
Bhutan
</option>
<option value="26" >
Bolivia
</option>
<option value="27" >
Bosnia and Herzegovina
</option>
<option value="28" >
Botswana
</option>
<option value="29" >
Bouvet Island
</option>
<option value="30" >
Brazil
</option>
<option value="31" >
British Indian Ocean Territory
</option>
<option value="32" >
Brunei
</option>
<option value="33" >
Bulgaria
</option>
<option value="34" >
Burkina Faso
</option>
<option value="35" >
Burundi
</option>
<option value="36" >
Cambodia
</option>
<option value="37" >
Cameroon
</option>
<option value="38" >
Canada
</option>
<option value="39" >
Cape Verde
</option>
<option value="40" >
Cayman Islands
</option>
<option value="41" >
Central African Republic
</option>
<option value="42" >
Chad
</option>
<option value="43" >
Chile
</option>
<option value="44" >
China
</option>
<option value="45" >
Christmas Island
</option>
<option value="46" >
Cocos (Keeling) Islands
</option>
<option value="47" >
Colombia
</option>
<option value="48" >
Comoros
</option>
<option value="49" >
Republic Of The Congo
</option>
<option value="50" >
Democratic Republic Of The Congo
</option>
<option value="51" >
Cook Islands
</option>
<option value="52" >
Costa Rica
</option>
<option value="53" >
Cote D'Ivoire (Ivory Coast)
</option>
<option value="54" >
Croatia (Hrvatska)
</option>
<option value="55" >
Cuba
</option>
<option value="56" >
Cyprus
</option>
<option value="57" >
Czech Republic
</option>
<option value="58" >
Denmark
</option>
<option value="59" >
Djibouti
</option>
<option value="60" >
Dominica
</option>
<option value="61" >
Dominican Republic
</option>
<option value="62" >
East Timor
</option>
<option value="63" >
Ecuador
</option>
<option value="64" >
Egypt
</option>
<option value="65" >
El Salvador
</option>
<option value="66" >
Equatorial Guinea
</option>
<option value="67" >
Eritrea
</option>
<option value="68" >
Estonia
</option>
<option value="69" >
Ethiopia
</option>
<option value="70" >
External Territories of Australia
</option>
<option value="71" >
Falkland Islands
</option>
<option value="72" >
Faroe Islands
</option>
<option value="73" >
Fiji Islands
</option>
<option value="74" >
Finland
</option>
<option value="75" >
France
</option>
<option value="76" >
French Guiana
</option>
<option value="77" >
French Polynesia
</option>
<option value="78" >
French Southern Territories
</option>
<option value="79" >
Gabon
</option>
<option value="80" >
Gambia The
</option>
<option value="81" >
Georgia
</option>
<option value="82" >
Germany
</option>
<option value="83" >
Ghana
</option>
<option value="84" >
Gibraltar
</option>
<option value="85" >
Greece
</option>
<option value="86" >
Greenland
</option>
<option value="87" >
Grenada
</option>
<option value="88" >
Guadeloupe
</option>
<option value="89" >
Guam
</option>
<option value="90" >
Guatemala
</option>
<option value="91" >
Guernsey and Alderney
</option>
<option value="92" >
Guinea
</option>
<option value="93" >
Guinea-Bissau
</option>
<option value="94" >
Guyana
</option>
<option value="95" >
Haiti
</option>
<option value="96" >
Heard and McDonald Islands
</option>
<option value="97" >
Honduras
</option>
<option value="98" >
Hong Kong S.A.R.
</option>
<option value="99" >
Hungary
</option>
<option value="100" >
Iceland
</option>
<option value="101" selected >
India
</option>
<option value="102" >
Indonesia
</option>
<option value="103" >
Iran
</option>
<option value="104" >
Iraq
</option>
<option value="105" >
Ireland
</option>
<option value="106" >
Israel
</option>
<option value="107" >
Italy
</option>
<option value="108" >
Jamaica
</option>
<option value="109" >
Japan
</option>
<option value="110" >
Jersey
</option>
<option value="111" >
Jordan
</option>
<option value="112" >
Kazakhstan
</option>
<option value="113" >
Kenya
</option>
<option value="114" >
Kiribati
</option>
<option value="115" >
Korea North
</option>
<option value="116" >
Korea South
</option>
<option value="117" >
Kuwait
</option>
<option value="118" >
Kyrgyzstan
</option>
<option value="119" >
Laos
</option>
<option value="120" >
Latvia
</option>
<option value="121" >
Lebanon
</option>
<option value="122" >
Lesotho
</option>
<option value="123" >
Liberia
</option>
<option value="124" >
Libya
</option>
<option value="125" >
Liechtenstein
</option>
<option value="126" >
Lithuania
</option>
<option value="127" >
Luxembourg
</option>
<option value="128" >
Macau S.A.R.
</option>
<option value="129" >
Macedonia
</option>
<option value="130" >
Madagascar
</option>
<option value="131" >
Malawi
</option>
<option value="132" >
Malaysia
</option>
<option value="133" >
Maldives
</option>
<option value="134" >
Mali
</option>
<option value="135" >
Malta
</option>
<option value="136" >
Man (Isle of)
</option>
<option value="137" >
Marshall Islands
</option>
<option value="138" >
Martinique
</option>
<option value="139" >
Mauritania
</option>
<option value="140" >
Mauritius
</option>
<option value="141" >
Mayotte
</option>
<option value="142" >
Mexico
</option>
<option value="143" >
Micronesia
</option>
<option value="144" >
Moldova
</option>
<option value="145" >
Monaco
</option>
<option value="146" >
Mongolia
</option>
<option value="147" >
Montserrat
</option>
<option value="148" >
Morocco
</option>
<option value="149" >
Mozambique
</option>
<option value="150" >
Myanmar
</option>
<option value="151" >
Namibia
</option>
<option value="152" >
Nauru
</option>
<option value="153" >
Nepal
</option>
<option value="154" >
Netherlands Antilles
</option>
<option value="155" >
Netherlands The
</option>
<option value="156" >
New Caledonia
</option>
<option value="157" >
New Zealand
</option>
<option value="158" >
Nicaragua
</option>
<option value="159" >
Niger
</option>
<option value="160" >
Nigeria
</option>
<option value="161" >
Niue
</option>
<option value="162" >
Norfolk Island
</option>
<option value="163" >
Northern Mariana Islands
</option>
<option value="164" >
Norway
</option>
<option value="165" >
Oman
</option>
<option value="166" >
Pakistan
</option>
<option value="167" >
Palau
</option>
<option value="168" >
Palestinian Territory Occupied
</option>
<option value="169" >
Panama
</option>
<option value="170" >
Papua new Guinea
</option>
<option value="171" >
Paraguay
</option>
<option value="172" >
Peru
</option>
<option value="173" >
Philippines
</option>
<option value="174" >
Pitcairn Island
</option>
<option value="175" >
Poland
</option>
<option value="176" >
Portugal
</option>
<option value="177" >
Puerto Rico
</option>
<option value="178" >
Qatar
</option>
<option value="179" >
Reunion
</option>
<option value="180" >
Romania
</option>
<option value="181" >
Russia
</option>
<option value="182" >
Rwanda
</option>
<option value="183" >
Saint Helena
</option>
<option value="184" >
Saint Kitts And Nevis
</option>
<option value="185" >
Saint Lucia
</option>
<option value="186" >
Saint Pierre and Miquelon
</option>
<option value="187" >
Saint Vincent And The Grenadines
</option>
<option value="188" >
Samoa
</option>
<option value="189" >
San Marino
</option>
<option value="190" >
Sao Tome and Principe
</option>
<option value="191" >
Saudi Arabia
</option>
<option value="192" >
Senegal
</option>
<option value="193" >
Serbia
</option>
<option value="194" >
Seychelles
</option>
<option value="195" >
Sierra Leone
</option>
<option value="196" >
Singapore
</option>
<option value="197" >
Slovakia
</option>
<option value="198" >
Slovenia
</option>
<option value="199" >
Smaller Territories of the UK
</option>
<option value="200" >
Solomon Islands
</option>
<option value="201" >
Somalia
</option>
<option value="202" >
South Africa
</option>
<option value="203" >
South Georgia
</option>
<option value="204" >
South Sudan
</option>
<option value="205" >
Spain
</option>
<option value="206" >
Sri Lanka
</option>
<option value="207" >
Sudan
</option>
<option value="208" >
Suriname
</option>
<option value="209" >
Svalbard And Jan Mayen Islands
</option>
<option value="210" >
Swaziland
</option>
<option value="211" >
Sweden
</option>
<option value="212" >
Switzerland
</option>
<option value="213" >
Syria
</option>
<option value="214" >
Taiwan
</option>
<option value="215" >
Tajikistan
</option>
<option value="216" >
Tanzania
</option>
<option value="217" >
Thailand
</option>
<option value="218" >
Togo
</option>
<option value="219" >
Tokelau
</option>
<option value="220" >
Tonga
</option>
<option value="221" >
Trinidad And Tobago
</option>
<option value="222" >
Tunisia
</option>
<option value="223" >
Turkey
</option>
<option value="224" >
Turkmenistan
</option>
<option value="225" >
Turks And Caicos Islands
</option>
<option value="226" >
Tuvalu
</option>
<option value="227" >
Uganda
</option>
<option value="228" >
Ukraine
</option>
<option value="229" >
United Arab Emirates
</option>
<option value="230" >
United Kingdom
</option>
<option value="231" >
United States
</option>
<option value="232" >
United States Minor Outlying Islands
</option>
<option value="233" >
Uruguay
</option>
<option value="234" >
Uzbekistan
</option>
<option value="235" >
Vanuatu
</option>
<option value="236" >
Vatican City State (Holy See)
</option>
<option value="237" >
Venezuela
</option>
<option value="238" >
Vietnam
</option>
<option value="239" >
Virgin Islands (British)
</option>
<option value="240" >
Virgin Islands (US)
</option>
<option value="241" >
Wallis And Futuna Islands
</option>
<option value="242" >
Western Sahara
</option>
<option value="243" >
Yemen
</option>
<option value="244" >
Yugoslavia
</option>
<option value="245" >
Zambia
</option>
<option value="246" >
Zimbabwe
</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="demo_phone" class="form-label">Phone Number *</label>
<input type="text" class="form-control" id="demo_phone" name="phone"
placeholder="Enter phone number" maxlength="10"
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label for="demo_course" class="form-label">Course Interested In *</label>
<select class="form-control select2" name="course" id="demo_course" required>
<option value="">Select Course</option>
<option value="1">HTML Training</option>
<option value="2">Android App Development</option>
<option value="3">Manual Training</option>
<option value="4">Adobe Training</option>
<option value="5">Digital Marketing</option>
<option value="6">Core Java Training</option>
<option value="7">CSS Training</option>
<option value="8">Bootstrap Training</option>
<option value="9">Javascript Training</option>
<option value="10">React JS Training</option>
<option value="11">Node JS Training</option>
<option value="12">Angular Training</option>
<option value="13">Django Training</option>
<option value="14">PHP Training</option>
<option value="16">Laravel Training</option>
<option value="17">Codeignitor Training</option>
<option value="18">Wordpress Training</option>
<option value="19">jQuery Training</option>
<option value="20">IOS Training</option>
<option value="21">Flutter Training</option>
<option value="22">Ionic Training</option>
<option value="23">React Native Training</option>
<option value="24">Augmented Reality Training</option>
<option value="25">Advance Java Training</option>
<option value="26">Selenium Training</option>
<option value="27">Performance Training</option>
<option value="28">Photoshop Training</option>
<option value="29">Illustrator Training</option>
<option value="30">Figma Training</option>
<option value="31">SEO Training</option>
<option value="379">SAP ABAP Training</option>
<option value="382">Microsoft Azure Training</option>
<option value="392">ASP .NET Training</option>
<option value="400">SAP ABAP On HANA Training</option>
<option value="429">SAP FIORI Training</option>
<option value="459">SAP MM Training</option>
<option value="461">SAP SD Training</option>
<option value="508">PMP Certification Training</option>
<option value="521">PMI® Agile Certified Practitioner Training</option>
<option value="522">Python Training</option>
<option value="523">Machine Learning</option>
<option value="528">Microsoft Power BI Training</option>
<option value="538">Tableau Training</option>
<option value="569">Alteryx Training</option>
<option value="572">MySQL Training</option>
<option value="585">SalesForce Training</option>
<option value="634">Mobile App Testing Using Appium Training</option>
<option value="635">Continuous Testing in DevOps Training</option>
<option value="636">AWS Training</option>
<option value="637">Deep Learning</option>
<option value="638">DevOps Training</option>
<option value="640">Certified Scrum Master® (CSM) Certification Training</option>
<option value="641">PRINCE2® Foundation & Practitioner Certification Course Training</option>
<option value="642">GCP Certification Training</option>
<option value="23220">Advanced Excel & Power BI</option>
<option value="23221">Power BI and SQL</option>
<option value="23222">Data Analyst Foundation - Advanced Excel & SQL +&Power BI</option>
<option value="other">Other Course</option>
</select>
</div>
</div>
<div class="row" id="demo_other_course_container" style="display: none;">
<div class="col-md-12 mb-3">
<label for="demo_other_course" class="form-label">Specify Other Course</label>
<input type="text" class="form-control" id="demo_other_course" name="other_course"
placeholder="Enter course name" maxlength="50">
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label for="demo_message" class="form-label">Additional Message (Optional)</label>
<textarea class="form-control" id="demo_message" name="description"
rows="3" maxlength="500" placeholder="Any specific questions or requirements?"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<div class="g-recaptcha" data-sitekey="6LfrXv4nAAAAADudm8X0oYnxC8M7GIOJ_pMfS8TS"
data-form="book-free-demo"></div>
</div>
</div>
<input type="hidden" name="pincode" value="1" />
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg px-5">
<i class="fas fa-calendar-check me-2"></i>Book Free Demo
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#bookFreeDemoModal .modal-content {
border: none;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
#bookFreeDemoModal .modal-header {
border-radius: 15px 15px 0 0;
background: linear-gradient(135deg, #b51d74, #d63384) !important;
padding: 20px 30px;
}
#bookFreeDemoModal .modal-body {
padding: 30px;
}
#bookFreeDemoModal .form-label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
#bookFreeDemoModal .form-control {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 12px 15px;
font-size: 14px;
transition: border-color 0.3s ease;
}
#bookFreeDemoModal .form-control:focus {
border-color: #b51d74;
box-shadow: 0 0 0 0.2rem rgba(181, 29, 116, 0.25);
}
#bookFreeDemoModal .btn-primary {
background: linear-gradient(135deg, #b51d74, #d63384);
border: none;
border-radius: 8px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
#bookFreeDemoModal .btn-primary:hover {
background: linear-gradient(135deg, #d63384, #b51d74);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(181, 29, 116, 0.3);
}
#bookFreeDemoModal .alert-info {
background-color: #e3f2fd;
border-color: #2196f3;
color: #1565c0;
border-radius: 8px;
}
/* Select2 Custom Styling for Modal */
#bookFreeDemoModal .select2-container {
width: 100% !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single {
height: 50px !important;
border: 1px solid #ced4da !important;
border-radius: 8px !important;
padding: 0 !important;
background-color: #fff !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 48px !important;
padding-left: 15px !important;
padding-right: 40px !important;
font-size: 14px !important;
color: #495057 !important;
}
#bookFreeDemoModal .select2-container .select2-selection--single .select2-selection__arrow {
height: 48px !important;
right: 10px !important;
}
#bookFreeDemoModal .select2-container--default .select2-selection--single:focus,
#bookFreeDemoModal .select2-container--default.select2-container--focus .select2-selection--single,
#bookFreeDemoModal .select2-container--default.select2-container--open .select2-selection--single {
border-color: #b51d74 !important;
box-shadow: 0 0 0 0.2rem rgba(181, 29, 116, 0.15) !important;
outline: none !important;
}
#bookFreeDemoModal .select2-dropdown {
border: 1px solid #ced4da !important;
border-radius: 8px !important;
z-index: 9999 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
#bookFreeDemoModal .select2-search--dropdown {
padding: 8px !important;
}
#bookFreeDemoModal .select2-search--dropdown .select2-search__field {
border: 1px solid #ced4da !important;
border-radius: 6px !important;
padding: 8px 12px !important;
}
#bookFreeDemoModal .select2-results__option {
padding: 10px 15px !important;
font-size: 14px !important;
border: none !important;
}
#bookFreeDemoModal .select2-results__option--highlighted {
background-color: #f8f9fa !important;
color: #b51d74 !important;
}
#bookFreeDemoModal .select2-results__option--selected {
background-color: #b51d74 !important;
color: #fff !important;
}
#bookFreeDemoModal .select2-results__option:hover {
background-color: #f8f9fa !important;
color: #b51d74 !important;
}
/* Remove any outline on container */
#bookFreeDemoModal .select2-container--default:focus {
outline: none !important;
}
</style>
<script>
// Handle Book Free Demo Modal
document.addEventListener('DOMContentLoaded', function() {
// Initialize Select2 for dropdowns
if (typeof $.fn.select2 !== 'undefined') {
$('#demo_country').select2({
dropdownParent: $('#bookFreeDemoModal'),
placeholder: 'Select Country',
allowClear: true
});
$('#demo_course').select2({
dropdownParent: $('#bookFreeDemoModal'),
placeholder: 'Select Course',
allowClear: true
});
}
// Handle course selection change
const demoCourseSel = document.getElementById('demo_course');
const demoOtherContainer = document.getElementById('demo_other_course_container');
if (demoCourseSel && demoOtherContainer) {
// Use jQuery for Select2 compatibility
$('#demo_course').on('change', function() {
if (this.value === 'other') {
demoOtherContainer.style.display = 'block';
document.getElementById('demo_other_course').required = true;
} else {
demoOtherContainer.style.display = 'none';
document.getElementById('demo_other_course').required = false;
}
});
}
// Handle form submission
const demoForm = document.getElementById('bookFreeDemoForm');
if (demoForm) {
demoForm.addEventListener('submit', function(e) {
e.preventDefault();
// Let backend handle reCAPTCHA validation
// Submit the form
this.submit();
});
}
});
// Function to open Book Free Demo modal with course pre-selected
window.openBookFreeDemoModal = function(courseName = '') {
const modal = new bootstrap.Modal(document.getElementById('bookFreeDemoModal'));
// Pre-fill course if provided
if (courseName) {
const courseSelect = $('#demo_course');
const options = courseSelect.find('option');
options.each(function() {
if ($(this).text().toLowerCase().includes(courseName.toLowerCase())) {
courseSelect.val($(this).val()).trigger('change');
return false; // break
}
});
}
// Reset reCAPTCHA
if (typeof grecaptcha !== 'undefined') {
setTimeout(() => {
try {
grecaptcha.reset();
} catch(e) {
}
}, 500);
}
modal.show();
}
</script>
<script>
(function() {
var ol = document.querySelector('ol.breadcrumb');
if (!ol) return;
var existing = document.querySelectorAll('script[type="application/ld+json"]');
for (var i = 0; i < existing.length; i++) {
try { if (JSON.parse(existing[i].textContent)['@type'] === 'BreadcrumbList') return; } catch(e) {}
}
var items = ol.querySelectorAll('li.breadcrumb-item');
if (items.length < 2) return;
var listItems = [];
items.forEach(function(li, idx) {
var a = li.querySelector('a');
var name = (a ? a.textContent : li.textContent).trim();
var url = a ? a.href : window.location.href;
if (!name) return;
listItems.push({ "@type": "ListItem", "position": idx + 1, "name": name, "item": url });
});
if (listItems.length < 2) return;
var s = document.createElement('script');
s.type = 'application/ld+json';
s.textContent = JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": listItems });
document.head.appendChild(s);
})();
</script>
</body>
</html> |